拼接不使用数组行vue js答案

【问题标题】：splice not working with a array row vue js拼接不使用数组行vue js
【发布时间】：2021-03-03 18:11:11
【问题描述】：

我有一个对象数组，但是当我想从数组列表中删除一个对象时，只会从末尾删除项目

<div class="hours" v-for="(time, index) in hour" :key="index">

然后我把点击功能放在一个图标上

<b-icon
v-if="time.delete"
icon="x"
width="20"
height="20"
class="delete-time"
@click="deleteTime(index)"
></b-icon>

但是当我去删除时

methods: {
moment, 
deleteTime(index) {
       this.hour.splice(index, 1);
 },

【问题讨论】：

你为什么不选择this.hour.splice(index, 1);
试过了，还是不行……
您在尝试时遇到了什么错误？ this.hour.indexOf(index) 将返回未定义。另外，你为什么将:key绑定到time.index而不是简单地绑定到index？请注意，对 key 属性使用索引（可能会因排序而改变）并不是一个好主意。使用对象的属性，最好是唯一 ID
i left as: key only index 正如你告诉我的那样，我不能使用其他属性，因为它没有任何属性
hour 是否存在于 data 中？ If not, Vue.js won't track changes。您是否尝试在deleteItem() 中同时记录hour 和index？他们是你所期望的吗？您能否将 hour 和 index 的记录值添加到问题中？

标签： javascript vue.js delete-row splice

【解决方案1】：

我发现挑战在于您需要像之前一样在 HOUR 中添加一个唯一 ID。我已经更新了我之前的答案

 hour: [
            {
              id: 1,
              "item-1": 10,
            },
            {
              id: 2,
              "item-2": 11,
            },
            {
              id: 3,
              "item-3": 12,
            },
          ],

请注意，key 已分配给从 hour 对象获取的唯一 ID。

:key="time.id"

而deleteItems取index有参数

@click="deleteTime(index)"

      <div class="hours" v-for="(time, index) in hour" :key="time.id">
        <button @click="deleteTime(index)">
          Content {{time.id}}
        </button>
      </div>

然后你的方法去

deleteTime(index) {
            this.hour.splice(index, 1);
          },

【讨论】：

【解决方案2】：

这应该可以工作，总是添加一个 id 用于跟踪，顺便说一句，如果你在这里使用 splice 它也可以工作

new Vue({
  el: '#app',
  data: {
    hour: [
      { id: 1, name: "one" },
      { id: 2, name: "two" },
      { id: 3, name: "three" }
    ]
  },
  methods: {
    deleteTime(id) {
      this.hour = this.hour.filter(item => item.id != id);
    }
  },
});

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id ="app">
  <div class="hours" v-for="(time, index) in hour" :key="index">
    {{ time.name }}
    <button @click="deleteTime(time.id)">del</button>
  </div>
</div>

【讨论】：

【解决方案3】：

试试这个

deleteTime(index) {
       this.hour.splice(index, 1);
 },

【讨论】：

它不会在控制台中给我任何错误，但它总是会删除最后一行
index的值是多少？
索引根据他们要删除的行变化
能否请您创建一个代码沙箱并分享链接