Question

我的代码如下：

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

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

未捕获的TypeError：无法读取null的属性'parentNode'

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

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

parent.removeChild(child);

未捕获TypeError：无法在'Node'上执行'removeChild'：参数1不是'Node'类型。

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

Answer 1

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

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

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

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

Vuejs v-for remove元素

1 个答案: