vue.js - VueJS v-if = array[index] 不工作

Question

我想制作一个当鼠标悬停在图像上时获取文本框的组件。

下面是 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 使用 array[index] 还是有其他原因？

Answer 1

问题不在于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 会 Hook 这些方法，以便它可以检测到变化。

这里是.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
)