vue.js - vuejs 通过引用数组中的 bool 添加/删除类

Question

我正在根据 bool 值添加/删除一个类。仅作为 bool 工作，但如果 bool 在数组中则不工作此行有效，不透明类被添加/删除:

<img v-bind:class="{opaque: slide1}" src="img/forest-field.jpg" />

此行不起作用，不添加/删除不透明类:

<img v-bind:class="{opaque: slideBools[0]}" src="img/forest-field.jpg" />

实例数据中的代码:

new Vue({
  el: '#myCarousel',
  data: {
    slideBools: [true, false, false, false],
    slide1: true,
    slide2: false,
    slide3: false,
    slide4: false,
    },
  },
});

我正在像这样更新实例方法中的 bool 值:

  methods: {
    startSlides: function () {
      var vm = this;
      setInterval(() => {
        vm.slideBools[vm.curImage] = true;
      }, 4000);
    },
  }

更新问题:请问是不是我从html中引用数组值的方式是问题所在

Answer 1

更新数组值时使用 Vue.set或其别名 this.$set method反射(reflect)在 DOM 中，因为它的嵌套属性直接更新不会反射(reflect)在所有情况下。

this.$set(this.slideBools, 0, true)

引用Vue documentation about reactivity获取更多信息。

---

更新:在您的情况下，代码如下所示:

  methods: {
    startSlides: function () {
      var vm = this;
      setInterval(() => {
        v.$set(vm.slideBools, vm.curImage, true);
      }, 4000);
    },
  }