Vue.js Vuejs v-for删除元素

我有如下代码：

<div id="files">
  <div v-for="(file, key) in data.files" v-bind:id="key">
    @{{ file }}
    <span v-on:click="removeFile(key)">
      <button>X</button>
    </span>
    <button v-on:click="addFiles()">Add Files</button>
  </div>
</div>

当我单击按钮时，所选文件也已被删除，但它也返回错误，如：

未捕获的TypeError:无法读取null的属性“parentNode”

我尝试了这种方法，但还是遇到了同样的问题：文件已被删除，但出现了错误

var parent = document.getElementById("files");
var child = document.getElementById("#" + key);

parent.removeChild(child);

未捕获的TypeError:未能在“节点”上执行“removeChild”：参数1不是“节点”类型

---

有什么想法吗？非常感谢

用以下内容替换

removeFile（）

方法的内容： （假定

文件

变量是一个数组）

还可以使用Vue帮助器删除数组中的项或对象中的属性：

methods: {
   removeFile(key) {
       this.$delete(this.files, key);
   }

---

使用Vue时，这不是管理DOM的正确方法。您应该通过v-for维护列表，然后修改data.files数组以从DOM.oh tks中删除元素！我意识到我犯了愚蠢的错误。我有一个像你一样的方法，但我认为这只是删除值，不能删除显示>methods: { removeFile(key) { this.files.splice(key, 1); }

methods: {
   removeFile(key) {
       this.$delete(this.files, key);
   }