數組拼接總是從最后刪除一個項目？

Question

我在從數組中刪除項目時遇到問題。 陣列拼接應該可以工作，但它不像我想要的那樣工作。 它總是從最后刪除項目。 我正在使用 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>

Answer 1

這一定是因為你的流程按鈕，我試圖復制你的錯誤，但最終還是這個代碼。 我只是用輸入替換了流程按鈕，它可以工作。 試試下面的代碼。

使用 v-bind:key="index"，當 Vue 更新使用 v-for 呈現的元素列表時，默認情況下它使用“就地補丁”策略。 如果數據項的順序發生了變化，Vue 不會移動 DOM 元素以匹配項的順序，而是就地修補每個元素並確保它反映應該在該特定索引處呈現的內容。 這類似於 track-by="$index" 的行為

您在數據和組件之間缺少逗號，我在這里刪除了組件，它現在不會導致任何錯誤，並且更多提示不要將雙引號與單引號混合。

<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>

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>

Answer 3

嘗試這個。 使用此正確刪除項目。

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