切换到v-for项目会影响整个列表,如何使每个切换仅影响包含列表项？

Question

我正在制作带有v-for循环的项目列表.在循环的每个项目内部都有一个按钮,其中包含显示描述文本的单击事件方法.当我点击按钮时,它应仅在其自己的项目内切换,但它会影响v-for列表中的所有元素.

那么,如何制作一个仅影响其自身项目的切换方法呢？

<template>
  <div>

    <div v-for="item in items" :class="{ activeclass: isActive }">

      <div class="item-text">
        {{item.text}}
      </div>
      <button @click="toggle()">show</button>

      <div v-show="isActive" class="item-desc">
        {{item.desc}}
      </div>

    </div>


  </div>
</template>

<script>
  export default {

    data () {

      return {

        items: [
          {
            text: 'Foo',
            desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
          },
          {
            text: 'Bar',
            desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',

          }
        ],

        isActive: false
      }
    },

    methods: {

      toggle: function () {
        this.isActive = !this.isActive;
      }

    },


  }
</script>

Answer 1

正如@Nora所说,您可以(也可能应该)为每个列表项创建一个单独的组件,因此您将拥有一个接受item作为prop的组件,然后每个组件都可以拥有它自己的isActive标志,这使得标记保持良好和干净:

零件:

Vue.component('toggle-list-item', {
  template: '#list-item',
  props: ['item'],
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    }
  },
  data() {
    return {
      isActive: false
    }
  },
})

标记

现在您只需将组件放在您的v-for:

<div id="app">
  <div v-for="item in items">
    <toggle-list-item :item="item"></toggle-list-item>
  </div>
</div>

这是JSFiddle:https://jsfiddle.net/w10qx0dv/

Answer 2

如果应显示说明,则可以在列表中的每个项目上添加属性:

<template>
  <ul>
    <li v-for="item in items" :class="{ activeclass: item.isActive }">
      <div class="item-text">
        {{ item.text }}
      </div>
      <button @click="toggle(item)">show</button>
      <div v-show="item.isActive" class="item-desc">
        {{ item.desc }}
      </div>
    </li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            isActive: false,
            text: 'Foo',
            desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
          },
          {
            isActive: false,
            text: 'Bar',
            desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
          }
        ],
      }
    },
    methods: {
      toggle: function (item) {
        item.isActive = !item.isActive;
      }
    },
  }
</script>

或者,您可以将其提取li到单独的组件中.