Хочу сделать небольшой справочник, в котором можно будет добавлять, удалять компании. Столкнулся с такой проблемой, почему при изменении data
в строке
this.companies[key] = {};
не происходит перерисовка компонента, но при этом в консоли уже можно увидеть, что объект удален.
Сам код:
<template>
<div>
<tr v-for="company in companies" :key="company.INN">
<td v-for="property in company" :key="property">
{{ property }}
</td>
<td>
<button v-on:click="removeCompany(company.name)">Remove company</button>
</td>
</tr>
</div>
</template>
<script>
export default {
name: '',
props: [],
methods: {
removeCompany(removdCompany) {
for (let key in this.companies) {
if (this.companies[key].name === removdCompany) {
this.companies[key] = {};
}
}
}
},
data() {
return {
companies: [
{
name: 'Cola',
CEO: 'Иванов',
INN: '2'
},
{
name: 'PepsiCo',
CEO: 'Петров',
INN: '3'
}
]
}
}
};
</script>