Vuejs v-for 删除元素答案

【问题标题】：Vuejs v-for remove elementVuejs v-for 删除元素
【发布时间】：2018-06-12 03:29:42
【问题描述】：

我有类似的代码：

<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>

文件js

methods: {
   removeFile(key) {
       var elem = document.getElementById("#" + key);
       elem.parentNode.removeChild(elem);
       return false;
   }

当我点击按钮时，选定的文件也被删除了，但它也返回了如下错误：

未捕获的类型错误：无法读取 null 的属性“parentNode”

我尝试过这种方式，但同样的问题：文件已被删除，出现错误

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

parent.removeChild(child);

未捕获的类型错误：无法在“节点”上执行“removeChild”：参数 1 不是“节点”类型。

有什么想法吗？非常感谢！

【问题讨论】：

在使用 Vue 时，这不是管理 DOM 的正确方法。您应该通过 v-for 维护列表，然后修改 data.files 数组以从 DOM 中删除一个元素。

标签： vue.js removechild v-for

【解决方案1】：

将 removeFile() 方法的内容替换为：（假设files 变量是一个数组）

methods: {
   removeFile(key) {
       this.files.splice(key, 1);
   }

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

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

【讨论】：

哦，谢谢！我意识到我犯了愚蠢的错误。我有一个像你这样的方法，但我认为这只会删除值而不能删除显示>.
在vue中，自己手动删除元素节点是不好的做法。你必须把它留给vue来处理。相反，你应该做的是更新你的数据，然后 Vue 会根据它采取行动。因此，如果您从数组中删除一项，vue 将在您的视图中删除与该项关联的元素。
不错！现在我明白了这个问题！再次感谢！