Vue & LoDash: переключение активной вкладки не работает - PullRequest
Новая
       17

Vue & LoDash: переключение активной вкладки не работает

0 голосов
/ 29 апреля 2018

У меня есть массив аукционов с каждым элементом, похожим на это (значительно сокращен для целей вопроса) 

{
    id: 1,
    title: 'N782AM',
    is_active: true
}

У меня есть панель кнопок, как эта 

<button
    v-for="(tab, idx) in auctions"
    class="button tab-button"
    :key="tab.id"
    :class="{ active: tab.is_active}"
    @click="toggleTab(idx)">
    {{ tab.title }}
</button>

Метод toggleTab () это 

toggleTab(idx) {
    _.forEach(this.auctions, (a) => a.is_active = false);

    this.auctions[idx].is_active = true;
}

++++ ++++ ОБНОВЛЕНО Как и предполагалось, я изменил toggleTab, как показано ниже 

toggleTab(idx) {
   _.forEach(this.auctions, (a) => a.is_active = false);

   Vue.set(this.auctions[idx].is_active, true);
}

это приводит к этой ошибке:

vue.common.js? 2371: 1037 Uncaught TypeError: Невозможно использовать оператор «in» искать 'VN-A566' в N-782AM

++++ ++++ ОБНОВЛЕНО

Я ожидаю, что при нажатии на выбранную вкладку должен быть назначен активный класс, и он должен стать синим, а на всех остальных вкладках активный класс должен быть удален, но ничего не происходит.

1 Ответ

0 голосов
/ 29 апреля 2018

Это очень распространенная проблема реактивности. использование Vue.set решит эту проблему.

Vue.set имеет 3 параметра. Vue.set( target, key, value )

Это пример того, как использовать его в методе 

toggleTab(idx) {
  _.forEach(this.auctions, (a, i) =>
    this.$set(this.auctions[i], "is_active", false)
  );

  this.$set(this.auctions[idx], "is_active", true);
}

Подробнее о https://vuejs.org/v2/guide/reactivity.html

...