Vue v-for развернуть только кликнув данные - PullRequest
Новая
       7

Vue v-for развернуть только кликнув данные

0 голосов
/ 29 июня 2018

У меня есть проект Vue с Firebase. Я использую v-for для получения данных из базы данных Firebase, и у меня есть значение "description". Когда пользователи щелкают в любом месте 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>

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

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

Получить индекс цикла: 

v-for="(item, index) in items"

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

setActiveRow(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>
0 голосов
/ 29 июня 2018

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

Слушать прослушивание tbody неправильно, вы должны слушать нажатие на каждом 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>

Надеюсь, это поможет.

...