拼接不适用于数组行vue js [英] splice not working with a array row vue js

问题描述

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

I have a Object array but when i want remove a object from array list only items are deleted from the end

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

然后将点击功能放在图标上

then I put the click function on an icon

<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);
 },

推荐答案

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

I discovered that the challenge is that you need to add a unique id in HOUR, as you had earlier. I have updated my previous answer

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

请注意，已将键分配给从 hour 对象获得的唯一ID.

Take note that key is assigned to the unique id gotten from the hour object.

: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);
          },

这篇关于拼接不适用于数组行vue js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！