数组splice方法总是从末尾删除一个元素吗？

Question

我在删除数组中的项目时遇到了问题。 Array splice 应该可以工作，但它并不像我想的那样工作。 它总是从最后删除项目。 我正在使用 Vue.js。 我正在动态地将项目推送到一个数组中。 但是在单击删除后，它会从最后删除。 我为什么会遇到这个问题。 我附上了代码。

<template>
<div>
    <span class="badge badge-pill mb-10 px-10 py-5 btn-add" :class="btnClass" @click="addBtn"><i class="fa fa-plus mr-5"></i>Button</span>


        <div class="block-content block-content-full block-content-sm bg-body-light font-size-sm" v-if="buttons.length > 0">
            <div v-for="(item, index) in buttons">
                <div class="field-button">
                    <div class="delete_btn"><i @click="remove(index)" class="fa fa-trash-o"></i></div>
                    <flow-button v-model="item.title" :showLabel="false" className="btn btn-block min-width-125 mb-10 btn-border" mainWrapperClass="mb-0" wrapperClass="pt-0" placeholder="Button Title"></flow-button>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
    import flowButton from '../assets/flow-button'

export default {
    name: "textArea",
    props:{
        index : Number
    },
    data() {
        return {
            buttons : [],
            btnClass : 'badge-primary',

        }
    }
    components : {
        flowButton
    },
    methods : {
        addBtn () {
            if(this.buttons.length >= 2) {
                this.btnClass = 'btn-secondary'
            }

            if(this.buttons.length < 3) {
                this.buttons.push({
                    title : ''
                });

            }
        },
        remove(index) {
            this.buttons.splice(index, 1)
        }
    }
}
 </script>

- Kapil Paul

---

你有负数索引吗？ - Nina Scholz

你的 v-for 元素似乎缺少了 :key。 - Phil

我的意思是，当我尝试通过索引删除一个项目时，它总是删除最后一个项目。它的工作方式就像pop函数。 - Kapil Paul

你试过插入一个键吗？ - A. L

是的，我也尝试过这个。但很不幸。 - Kapil Paul

Answer 1

我猜问题出在你的流程按钮上。我试着复制了你的错误，但最后得到了以下代码。我只是用输入框替换了流程按钮，现在它可以正常工作了。请尝试下面的代码。

使用 v-bind:key="index"。当 Vue 更新一个由 v-for 渲染的元素列表时，默认情况下它使用“就地修补”策略。如果数据项的顺序已更改，Vue 不会将 DOM 元素移动以匹配项目的顺序，而是会就地对每个元素进行修补，并确保它反映了应在该特定索引处呈现的内容。这类似于 track-by="$index" 的行为。

你的 data 和 components 之间缺少逗号。我在这里删除了组件，现在不会出现任何错误了。另外，还有一个提示，请勿混用双引号和单引号。

<template>
<div>
<span class="badge badge-pill mb-10 px-10 py-5 btn-add" :class="btnClass" @click="addBtn"><i class="fa fa-plus mr-5"></i>Button</span>
  <div class="block-content block-content-full block-content-sm bg-body-light font-size-sm" v-if="buttons.length > 0">
    <div v-for="(item, index) in buttons" v-bind:key="index">
      <div class="field-button">
        <div class="delete_btn"><i @click="remove(index)" class="fa fa-trash-o">sdfsdff</i></div>
        <input type="text" v-model="item.title" :showLabel="false" className="btn btn-block min-width-125 mb-10 btn-border" mainWrapperClass="mb-0" wrapperClass="pt-0" placeholder="Button Title"/>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: 'textArea',
  props: {
    index: Number
  },
  data () {
    return {
      buttons: [],
      btnClass: 'badge-primary'
    }
  },
  methods: {
    addBtn () {
      if (this.buttons.length >= 2) {
        this.btnClass = 'btn-secondary'
      }
      if (this.buttons.length < 3) {
        this.buttons.push({
          title: ''
        })
      }
    },
    remove (index) {
      this.buttons.splice(index, 1)
    }
  }
}
</script>

- Luxknight007

---

非常感谢。我用你的解决方案解决了问题。但是我使用了我的流程按钮组件，现在它可以工作了。我只是忘记传递一些属性了。:/ 是我的错。顺便说一下，非常感谢。 - Kapil Paul

Answer 2

我认为您可能正在与组件的index属性发生冲突。尝试为v-for循环的索引使用不同的名称：

<div v-for="(item, ind) in buttons">
    <div class="field-button">
        <div class="delete_btn"><i @click="remove(ind)" class="fa fa-trash-o"></i></div>
        <flow-button v-model="item.title" :showLabel="false" className="btn btn-block min-width-125 mb-10 btn-border" mainWrapperClass="mb-0" wrapperClass="pt-0" placeholder="Button Title"></flow-button>
    </div>
</div>

- Hammerbot

---

我尝试在控制台输出索引，它给出了正确的结果和值。但是从最后删除该项，这很奇怪。 - Kapil Paul

Answer 3

试试这个。使用此方法正确地移除一个项。

<div v-for="(item, ind) in buttons" :key="JSON.stringify(item)">

- Prosenjit