I have an array with companies like this:
[{
"id": 1,
"firstname": "lorem",
"lastname": "ipsum",
"name": "something",
"subscription": "premium",
"active": 1
}]
The companies are displayed in a layout and when I click on one of them it triggers:
lockCompany(id, index) {
Vue.set(this.companies, index, {active: 0});
}
But.. when I set active to 0 it removes firstname etc.. Am I doing something wrong?
Should be either (if you properly use :key=item.id in your v-for template):
Vue.set(this.companies[index], 'active', 0);
... or (otherwise):
let newCompany = Object.assign({}, this.companies[index], { active: 0 });
Vue.set(this.companies, index, newCompany);
As it stands, you just rewrite an element of your array with completely new object each time Vue.set is called.
v-for="(company, index) in companiesCheck" Should I change this?
:key is an optimal strategy. Check this section of official documentation for details.v-for="company in companiesCheck" :key="company.id" and trigger the function with @click="lockCompany(company.id)" and changed vue set to Vue.set(this.companiesCheck[id], 'active', 0); But I get a error: Cannot use 'in' operator to search for 'active' in undefinedid and index here. Instead of passing company.id so that you have to look up for specific element in an array, just pass company as a whole instead, then update it. Like this: lockCompany(company);, and then Vue.set(company, 'active', 0).Vue.delete( this.companies, index );. If you know a better solution I would love to hear:)You are setting the item in the companies array at a position of 0 to { active : 0 }
You probably just want to do
lockCompany(id, index) {
Vue.set(this.companies[index], 'active', 0 );
}
That will just set the active property to 0 instead.
