My array is only updating in the console and not in the DOM. I've already tried using :key but it's still not working. Here is my code:
<div style="margin-top: 5px;" v-for="(file, index) in editedItem.file_name"
:key="editedItem.file_id[index]" >
<a :href="`/biodidb/storage/${file}.${editedItem.file_type[index]}`" target="_blank">
{{`${file}.${editedItem.file_type[index]}`}}
</a>
<span style="cursor: pointer;" @click="deleteData(editedItem.file_id[index], 'photos', index)">
<v-icon
small
class="ml-3"
>
delete
</v-icon>
Delete
</span>
</div>
JS:
deleteData(id, type, index) {
this.editedItem.file_name.splice(index,1);
this.editedItem.file_type.splice(index,1);
this.editedItem.file_id.splice(index,1);
}
enter code here
I have a method called update as well. When clicked, it assigns an object to the 'editedItem' in my data.
data() {
return {
editedItem: {}
}
},
methods: {
update(id, item) {
this.editedItem = Object.assign({}, item);
}
}