Vuejs v-for 删除元素
Vuejs v-for remove element
我有这样的代码:
<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;
}
当我点击按钮时,选择的文件也被删除了,但它也返回了如下错误:
Uncaught TypeError: Cannot read property 'parentNode' of null
我试过这种方式但同样的问题:文件已被删除,错误
var parent = document.getElementById("files");
var child = document.getElementById("#" + key);
parent.removeChild(child);
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
有什么想法吗?非常感谢!
将 removeFile()
方法的内容替换为:
(假定 files
变量是一个数组)
methods: {
removeFile(key) {
this.files.splice(key, 1);
}
您还可以使用 Vue 帮助程序删除数组中的项目或对象中的 属性:
methods: {
removeFile(key) {
this.$delete(this.files, key);
}
我有这样的代码:
<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;
}
当我点击按钮时,选择的文件也被删除了,但它也返回了如下错误:
Uncaught TypeError: Cannot read property 'parentNode' of null
我试过这种方式但同样的问题:文件已被删除,错误
var parent = document.getElementById("files");
var child = document.getElementById("#" + key);
parent.removeChild(child);
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
有什么想法吗?非常感谢!
将 removeFile()
方法的内容替换为:
(假定 files
变量是一个数组)
methods: {
removeFile(key) {
this.files.splice(key, 1);
}
您还可以使用 Vue 帮助程序删除数组中的项目或对象中的 属性:
methods: {
removeFile(key) {
this.$delete(this.files, key);
}