VUEjs 数组在拼接后不会更新

Question

>数组只在控制台中更新，而不在DOM中更新。我已经尝试过输入：key。这是我的代码：

<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

我还有一个名为 update 的方法，单击时，我会将一个对象分配给数据中名为 editedItem 的对象。

data() {
    return {
        editedItem: {}
    }
},
methods: {
      update(id, item) {
             this.editedItem = Object.assign({}, item);
      }
}

Answer 1

您编辑的项目结构如何？ 您使用 V-for 的方式是针对以下数据

  data: {
    editedItem: {
      file_id: ['1'],
      file_type: ['type 1'],
      file_name: ['testing'],
    }

Answer 2

如果数据如下所示：

...
data:function(){
    return{
        editedItem{}
    }
}
...

之后，只需将数组添加到这样的editedItem

editedItem.file_name = ['myFileName'];

那么你的新file_name属性将不会是反应性的，也不会被 Vue 跟踪。

您需要指定要在函数中使用的数组data：

    ...
        data:function(){
            return{
                editedItem:{
                    file_name:[]
                }
            }
        }
  ...

或者按Vue.set()将新的新属性添加到编辑的项目

Vue.set(editedItem,'file_name',['myFileName'];