Question

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

{
    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'运算符在N-782AM中搜索“VN-A566”

++++ ++++修订

我的期望是，点击后，点击的标签应该被分配活动类并变为蓝色，所有其他标签应该删除活动类但没有任何事情发生。

Answer 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

中了解详情

Vue＆amp; LoDash：切换活动标签不起作用

1 个答案: