如何使用vue.set仅更新一个对象

Question

我有一个像这样的公司的阵列：

[{
    "id": 1,
    "firstname": "lorem",
    "lastname": "ipsum",
    "name": "something",
    "subscription": "premium",
    "active": 1
}]

公司以布局显示，当我点击其中一个公司时，它会触发：

lockCompany(id, index) {
    Vue.set(this.companies, index, {active: 0});
}

但..当我将active设置为0时，它会删除firstname等。我做错了什么？

Answer 1

应该是（如果您在:key=item.id模板中正确使用v-for）：

Vue.set(this.companies[index], 'active', 0);

......或（否则）：

let newCompany = Object.assign({}, this.companies[index], { active: 0 });
Vue.set(this.companies, index, newCompany);

就目前而言，每次调用Vue.set时，您只需使用全新对象重写数组元素。

Answer 2

您正在公司数组中将项目设置为0到{ active : 0 }

的位置

你可能只想做

lockCompany(id, index) {
    Vue.set(this.companies[index], 'active', 0 );
}

这样就可以将active属性设置为0。