vue-component - 在 v-for items 内部切换会影响整个列表，如何让每个切换只影响包含的列表项？

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/