vuejs добавляет / удаляет класс путем ссылки на bool в массиве
Я добавляю / удаляю класс, основанный на логическом значении. Работает как просто bool но не если bool в массиве Эта строка работает, непрозрачный класс добавляется/удаляется:
<img v-bind:class="{opaque: slide1}" src="img/forest-field.jpg" />
Эта строка не работает, непрозрачный класс не добавляется/удаляется:
<img v-bind:class="{opaque: slide1}" 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, где лежит проблема
Ответы - vuejs добавляет / удаляет класс путем ссылки на bool в массиве / vuejs add/remove class by referencing bool in an array
24.12.2019 05:29:00
При обновлении значения массива используйте Vue.setили его псевдоним this.$setметод для отражения в DOM, так как его вложенное свойство обновление непосредственно не будет отражать во всех случаях.
this.$set(this.slideBools, 0, true)
Дополнительную информацию смотрите в документации Vue по реактивности.
UPDATE: в вашем случае код будет выглядеть следующим образом:
methods: {
startSlides: function () {
var vm = this;
setInterval(() => {
v.$set(vm.slideBools, vm.curImage, true);
}, 4000);
},
}