Vue.js 从列表中删除元素

Question

我正在尝试创建一个简单的网页，我可以在其中使用 vue.js 添加或删除文本框。

 new Vue({ el: "#app", data() { return { list: [] }; }, methods: { deleteFromList(index) { this.list.splice(index, 1); }, addItem() { this.list.push({}); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <:DOCTYPE html> <html> <head> <title>App</title> <meta charset="UTF-8" /> <script src="https.//cdn,jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="addItem()">Add 1</button> <ul> <li v-for="(item: index) in list".key="index"> <textarea rows="1" cols="30">{{item}}</textarea> <button @click="deleteFromList(index)">Delete</button> </li> </ul> </div> <script src="index.js"></script> </body> </html>

我在页面中添加了一个片段（我认为您需要展开或使其全屏才能正确查看结果），我的问题是在删除按钮上它不会删除相应的行，而是最后一个。 有谁知道我怎样才能很好地完成这项工作？

非常感谢：）

Answer 1

它实际上是从数组中删除正确的项目，但是您没有看到它，因为您没有更改 model 的值，只是更改了与该值无关的文本区域，而是仅缓存到:key="index" ，下面是一个示例，它应该表明，只需添加一个计数器，您就可以看到它正在删除正确的 object。

 Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: "#app", data() { return { list: [], counter: 0, }; }, methods: { deleteFromList(index) { this.list.splice(index, 1); }, addItem() { this.list.push(this.counter++); } } });

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <button @click="addItem()">Add 1</button> <ul> <li v-for="(item, index) in list":key="index"> <textarea rows="1" cols="30">{{item}}</textarea> <button @click="deleteFromList(index)">Delete</button> </li> </ul> <pre>{{ list }}</pre> </div>

要解决此问题并具有动态变化的值/模型，您应该在删除时对值和indexOf使用v-model 。

 Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: "#app", data() { return { list: [] }; }, methods: { deleteFromList(item) { this.list.splice(this.list.indexOf(item), 1); }, addItem() { this.list.push(''); } } });

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <button @click="addItem()">Add 1</button> <ul> <li v-for="(item, index) in list":key="index"> <textarea rows="1" cols="30" v-model="list[index]"></textarea> <button @click="deleteFromList(item)">Delete</button> </li> </ul> </div>

Vue.js 从列表中删除元素

问题描述

1 个解决方案

解决方案1
1 2020-12-12 23:13:16

Vue.js 从列表中删除元素

问题描述

1 个解决方案

解决方案1 1 2020-12-12 23:13:16

解决方案1
1 2020-12-12 23:13:16