vue.js - 删除子组件(行)的意外行为

Question

描述:

我有一个包含一些产品的表格，每一行都是一个自定义 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">&times;</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>

Answer 1

正如@Bert 在评论中提到的那样。问题是我丢失了一把 key 。

https://v2.vuejs.org/v2/api/#key

添加它解决了问题谢谢