Vue & LoDash：切换活动选项卡不起作用答案

【问题标题】：Vue & LoDash: Toggling Active Tab not workingVue & LoDash：切换活动选项卡不起作用
【发布时间】：2018-04-29 14:04:55
【问题描述】：

我有一系列拍卖，每个元素看起来像这样（为了提问目的而显着缩短）

{
    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: Cannot use 'in' operator 在 N-782AM 中搜索“VN-A566”

++++更新++++

我的期望是，当点击时，被点击的选项卡应该被分配活动类并变成蓝色，所有其他选项卡都应该删除活动类，但什么都没有发生。

【问题讨论】：

反应性问题。使用 Vue.set
谢谢，雅各布。请查看更新后的问题

标签： vuejs2 lodash

【解决方案1】：

这是一个非常常见的反应性问题。使用 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了解更多信息

【讨论】：