VueJS v-if = 어레이[인덱스]가 작동하지 않음

VueJS v-if = 어레이[인덱스]가 작동하지 않음

마우스를 이미지 위에 올려놓으면 텍스트 상자가 뜨는 부품을 만들고 싶었습니다.

다음은 HTML 템플릿입니다.

<section class="item-container" v-for="(item, index) in items">
  <div class="image-box" @mouseenter="changeStatus(index)">
    <img class="image" src="item.link" alt>
  </div>
  <div class="text-box" @mouseleave="changeStatus(index)" v-if="show[index]">
    <h4>{{ item.name }}</h4>
    <p>{{ item.content }}</p>
  </div>
</section>

다음은 app.js입니다.

new Vue({
  el: '#app',
  data: {
    show: [false, false, false],
    items: [
      {
        name: 'Author 1',
        content: 'Content 1'
      },
      {
        name: 'Author 2',
        content: 'Content 2'
      },
      {
        name: 'Author 3',
        content: 'Content 3'
      }
    ]
  },
  methods: {
    changeStatus: function(index) {
      this.show[index] = !this.show[index];
      console.log(this.show); 
      console.log(this.show[index]);  // console gets it as expected
    }
  }
});

위의 코드를 실행하면 show 속성이 변경된 것을 알 수 있습니다.그러나 v-if가 업데이트되지 않았습니다.v-if에 어레이[인덱스]를 사용할 수 없거나 다른 이유가 있습니까?

문제는 이 문제가 아닙니다.v-if이는 Vue가 어레이 요소의 변경을 직접 검출할 수 없기 때문에 JavaScript의 제한 중 하나입니다.

따라서 Vue는 이를 위해 다음과 같은 몇 가지 도우미 기능을 제공합니다.Vue.set

이것을 변경하다this.show[index] = !this.show[index]

로.Vue.set(this.show, index, !this.show[index])

효과가 있을 거야

Vue.set유일한 해결책은 아닙니다.여러 가지 방법이 있습니다.알고 싶은 경우가 있을 수 있습니다.

JavaScript 배열의 네이티브 메서드를 사용할 수 있습니다.Vue는 변경을 검출할 수 있도록 이러한 메서드에 접속합니다.

다음은 의 사용 예를 제시하겠습니다..splice

this.show.splice(index, 1, !this.show[index])

다른 방법은 어레이를 완전히 교체하는 것입니다.ES6를 사용하는 경우 분산 연산자를 사용하여 어레이를 쉽게 복제할 수 있습니다.

this.show[index] = !this.show[index]
this.show = [...this.show]

.map새로운 어레이를 반환하기 때문에 동작합니다.

this.show = this.show.map((el, i) =>
  i === index ? !el : el
)

배열 대신 JS 개체를 사용하여 동일한 효과를 얻을 수 있습니다.바꿔 말하면,show: [false, false, false],와 함께show: {0:false, 1:false, 2:false},.

메서드의 컴포넌트에서는 다음을 사용할 수 있습니다.

this.$set(this.show, index, !this.show[index])

언급URL : https://stackoverflow.com/questions/41580617/vuejs-v-if-arrayindex-is-not-working