Vue v-для расширения только нажатых данных

Question

Vue v-для расширения только нажатых данных

У меня есть проект Vue с Firebase. Я использую v-for для получения данных из базы данных Firebase, и у меня есть «описание». Когда пользователи нажимают в любом месте tr, я хочу развернуть и показать только описание щелчка. Но в моем коде; когда я нажимаю tbody, расширяем все значения описания . Как я могу это исправить?

Мой код:

<tbody v-for="item in items" :key="item.id" @click="isClicked = !isClicked">

        <tr >
          <td>
            {{item.name}} 
          </td>
          <td>
            {{item.surname}}
          </td>
          <td>
            {{item.explanation}}
          </td>
        <td>
          <span @click="isDelete(item)">X</span>
        </td>
        </tr>
        <tr v-if="isClicked === true">  
          {{item.desc}}
        </tr>
      </tbody>

Спасибо за помощь.

javascript,vue.js,v-for,

0

Ответов: 2

JavaScript, vue.js, v-за,

Похожие вопросы

score 0 · Accepted Answer

0 принят

Получите v - for = "(item, index) в элементах" цикла:

setActiveRow(index)

Сделайте функцию, которая принимает индекс в качестве аргумента:

index

Присвоить indexк isClickedпеременной:

setActiveRow(index) {
  this.isClicked = index
}

Теперь используйте это как функцию щелчка и сравните isClickedпеременную в своей строке:

<tbody v-for="(item, index) in items" :key="item.id" @click="setActiveRow(index)">

И тогда показывается только определенная строка, если индекс соответствует:

<tr v-if="isClicked === index">
  <td> {{ item.desc }} </td>
</tr>

score 0 · Accepted Answer

0

Сначала вам нужно понять, что на самом деле делает ваш код, вы слушаете щелчок по телу, и по щелчку того, что вы устанавливаете, флаг isClicked как true / false, а все ваши элементы - v-if (ed) на одном флаге т.е. isClicked. Поэтому всякий раз, когда флаг изменяет каждый v-if, он также будет реагировать, поэтому каждое описание показано, что определенно нежелательно.

Прослушивание щелчка по телу неверно, вы должны прослушивать щелчок на каждом tr-s, чтобы вы могли действительно узнать, какой tr щелкнул. Теперь, щелкнув любой tr, сохраните идентификатор этого tr и покажите описание соответствующего элемента.

Ну, есть небольшая работа вокруг, которую вы действительно можете сделать в своем коде, чтобы он работал так, как вам хотелось.

Вот модифицированный код.

<tbody v-for="item in items" :key="item.id">

        <tr @click="isClicked = item.id">
          <td>
            {{item.name}} 
          </td>
          <td>
            {{item.surname}}
          </td>
          <td>
            {{item.explanation}}
          </td>
        <td>
          <span @click="isDelete(item)">X</span>
        </td>
        </tr>
        <tr v-if="isClicked === item.id">  
          {{item.desc}}
        </tr>
      </tbody>

Я надеюсь, что это помогает.