vue.js - 删除子组件(行)的意外行为
问题描述
描述:
我有一个包含一些产品的表格,每一行都是一个自定义的 vue<row>
组件。
每个元素都有一个触发自定义“删除”事件的关闭(删除)按钮。主应用程序侦听此事件并删除子项(按索引)
该行是一些静态文本的一部分,它包含一个带有数字的输入。
问题:
父级(Vue 应用程序)删除该行,但输入的值随后被移动(并替换其先前的值)到下一行的输入。
预期行为:
我想简单地删除我不关心文本输入值的项目,一旦它被删除。它不应该将其值移动到下一个兄弟。
我附上一个例子。
let row = Vue.component('row', {
name: 'row',
props: ['number', 'name', 'sq'],
data: () => ({
quantity: 0
}),
template: '<tr>' +
'<td>{{number}}</td>' +
'<td>{{name}}</td>' +
'<td><button v-on:click="quantity--">-</button><input type="text" :value="quantity"><button v-on:click="quantity++">+</button></td>' +
'<td><button v-on:click="remove">×</button></td>' +
'</tr>',
methods: {
remove: function() {
this.$emit('remove', this.quantity)
}
},
beforeMount() {
this.quantity = this.sq
}
})
new Vue({
el: "#app",
data: {
out: [],
rows: [{
name: "Icecream",
sq: 0
},
{
name: "Sugar cube",
sq: 50
},
{
name: "Peanut butter",
sq: 0
},
{
name: "Heavy cream",
sq: 0
},
{
name: "Cramberry juice",
sq: 0
}
]
},
methods: {
removeRow: function(index, quantity) {
this.out.push(`Removing row ${index} (${this.rows[index].name} | ${quantity} units)`)
this.rows.splice(index, 1)
}
},
computed: {
log: function() {
return this.out.join("\r\n")
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
h2 {
font-weight: bold;
margin-bottom: 10px;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
td {
padding: 4px 5px;
}
input {
width: 40px;
text-align: center;
}
h4 {
margin-top: 20px;
margin-bottom: 5px;
}
#log {
padding: 10px;
background: #20262E;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<h2>Cart:</h2>
<table>
<row v-for="(row, index) in rows" :number="index" :name="row.name" :sq="row.sq" v-on:remove="removeRow(index, $event)"></row>
</table>
<h4>Log</h4>
<pre id="log" v-html="log"></pre>
</div>
解决方案
推荐阅读
- java - java 命令的-agentlib 选项有什么作用。在其中使用 TakipiAgent 时出错
- spring-boot - 无法在 Kubernetes 上部署的 Spring Boot 应用程序中生成的 /tmp/ 目录中找到文件
- postgresql - 用于构建应用程序的 postgresql 限制
- node.js - 为什么我在 AWS EC2 上的 Nginx 设置不起作用?
- sql - 系列中的重复事件
- javascript - Google Chrome 扩展程序:如何获取打开标签的所有网址?
- amazon-web-services - 连续 AWS-IoT 作业触发器
- java - 制作聊天应用程序 Java 套接字时出现问题
- python - 模块 * 没有属性 * 使用鼻子测试
- javascript - 节点获取 JSON 问题