v-for 항목 내부 전환은 전체 목록에 영향을 미치는데, 각 전환이 포함된 목록 항목에만 영향을 미치도록 하려면 어떻게 해야 합니까?

v-for 항목 내부 전환은 전체 목록에 영향을 미치는데, 각 전환이 포함된 목록 항목에만 영향을 미치도록 하려면 어떻게 해야 합니까?

v-for loop으로 항목 목록을 만들고 있습니다.루프의 각 항목 안에는 설명 텍스트를 표시하는 클릭 이벤트 방식의 버튼이 있습니다.버튼을 클릭하면 자체 항목 내에서만 전환되지만 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>

@Nora가 말한 것처럼 목록 항목별로 개별 컴포넌트를 작성할 수 있습니다(그리고 작성해야 합니다).그러면 이 컴포넌트를 사용할 수 있습니다.item소품으로서 각 컴포넌트는 독자적인 것을 가질 수 있습니다.isActiveflag : 마크업을 깔끔하고 깔끔하게 유지합니다.

컴포넌트:

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/

설명이 표시될 경우 목록의 각 항목에 속성을 추가할 수 있습니다.

<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다른 컴포넌트로 변환합니다.

저도 같은 문제에 부딪혀서 이렇게 해결했어요.배열을 가져와서 클릭 항목의 인덱스를 눌렀습니다.배열에서 사용 가능한 인덱스를 기반으로 요소를 표시하거나 숨길 수 있습니다.

<template>
  <div>
    <div v-for="(item,i) in items">
      <div class="item-text">
        {{ item.text }}
      </div>
      <button @click="toggle(i)">show</button>
      <div v-show="clickedItems.includes(i)" 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.',
  
          }
        ],
        clickedItems:[]
      }
    },
    methods: {
      toggle() {
        if (this.clickedItems.includes(i)) {
          this.clickedItems.splice(this.clickedItems.indexOf(i), 1);
        } else {
          this.clickedItems.push(i);
        }
      }
  },
}
</script>

언급URL : https://stackoverflow.com/questions/41532118/toggle-inside-v-for-items-affects-the-entire-list-how-can-i-make-the-each-toggl