vuejs добавляет / удаляет класс путем ссылки на bool в массиве

vuejs добавляет / удаляет класс путем ссылки на bool в массиве

24.12.2019 05:22:16 Просмотров 31 Источник

Я добавляю / удаляю класс, основанный на логическом значении. Работает как просто 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, где лежит проблема

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59470140/vuejs-add-remove-class-by-referencing-bool-in-an-array#comment105119113_59470140
где вы обновляете значение массива?

Ответы - vuejs добавляет / удаляет класс путем ссылки на bool в массиве / vuejs add/remove class by referencing bool in an array

T. Short

24.12.2019 05:28:45

Попробуйте изменить свой реквизит данных на:

data() {
    return {
        slideBools: [true, false, false, false],
        slide1: true,
        slide2: false,
        slide3: false,
        slide4: false,
    };
  },
Pranav C Balan

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);
    },
  }
Закрыть X