Question

我有一个要显示为表格行的项目数组。但是，行本身具有输入，因此可以编辑这些项目的属性，并通过v模型将其回发到父Ptr<cv::ORB> orb = cv::ORB::create(); Mat descriptors1, descriptors2...; vector<KeyPoint> keypoints1, keypoints2...; orb->detectAndCompute(img1, noArray(), keypoints1, descriptors1); // first instance orb->detectAndCompute(img2, noArray(), keypoints2, descriptors2); // second instance // more detectAndCompute...数组中。当我尝试通过发出rows事件的子级中的按钮删除行时，将删除父级数组中的正确项，但是html仅删除数组的最后一行。

removeRow

我认为我做的事情根本上是错误的，但是似乎无法弄清楚如何管理通过v-model（或其他方式）绑定的javascript对象的动态列表。

我将尝试为我的问题准备一个Codepen。

Answer 1

请勿使用数组索引来标识Vue中的元素（键），因为使用某些操作此编号会刷新。从数组中心删除元素后，此位置之后的元素将收到新的索引值。从索引为0到4的5元素数组中删除元素后，您将获得索引为0到3的4元素数组。Vue将此更改视为删除键4（最后一行）。在数据中添加数据时创建自己的索引。

Vue.component("table-component", {
  template: "#table-template",
  data() {
    return {
      rows: [
        { id: 1, name: "A" },
        { id: 2, name: "B" },
        { id: 3, name: "C" },
        { id: 4, name: "D" },
        { id: 5, name: "E" }
      ]
    };
  },
  methods: {
    removeRow(id) {
      this.rows = this.rows.filter(row => row.id !== id);
    }
  }
});

Vue.component("row-component", {
  template: "#row-template",
  props: ["value"]
});

new Vue().$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table-component :rows="rows" />
</div>

<script type="text/x-template" id="table-template">
  <table v-if="rows.length" border="1" cellpadding="3" cellspacing="3">
    <tbody>
      <row-component v-for="(row, idx) in rows" :key="row.id" v-model="rows[idx]" @removeRow="removeRow"></row-component>
    </tbody>
  </table>
</script>
<script type="text/x-template" id="row-template">
  <tr>
    <td>{{value.id}}</td>
    <td>{{value.name}}</td>
    <td><button @click="$emit('removeRow', value.id)">X</button></td>
  </tr>
</script>

vue.js通过双向绑定从列表中删除对象

1 个答案: