小编Ros*_*hiv的帖子

我正在制作带有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
      }
    }, …