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

我正在添加/删除基于 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 引用数组值是问题所在

最佳答案

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

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

有关更多信息，请参阅 Vue documentation about reactivity。

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

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

关于vue.js - vuejs 通过在数组中引用 bool 来添加/删除类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59470140/