web-dev-qa-db-ja.com

Vue 2のコンポーネントの配列にアイテムを追加および削除する方法

3つの要素を含むコンポーネント「my-item」を作成しました。ドロップダウン（「itemList」が入力されます）と、ドロップダウンから入力された2つの入力ボックスです。このコンポーネントは行と見なされます。

一度に1つの行を追加および削除しようとしていますが、2つのことがわかりません。 （1）rows配列に何を追加しますか？ （2）this.rows.splice（index、1）が最後の行のみを削除するのはなぜですか？

https://jsbin.com/mugunum/edit?html,output

ありがとう

<div id="app">
    <my-item v-for="(row, index) in rows"
         :itemdata="itemList"
          v-on:remove="removeRow(index)">
    </my-item>
<div>
    <button @click="addRow"> Add Row </button>
</div>
</div>

<template id="item-template">
<div>
    <select v-model="selected">
        <option v-for="item in itemdata"  :value="item">
           {{ item.code }}
        </option>
    </select>
    <input type="text" placeholder="Text" v-model="selected.description">
    <input type="text" placeholder="value" v-model="selected.unitprice">
    <button v-on:click= "remove"> X </button>
</div>
</template>

Vue.component('my-item', {
props: ['itemdata'],
template: '#item-template',
data: function () {
    return {
    selected: this.itemdata[0]
    }
},
methods: {
    remove() {
        this.$emit('remove');
    }
}
}),

new Vue({
el: "#app",
data: {
    rows: [],
    itemList: [
        { code: 'Select an Item', description: '', unitprice: ''},
        { code: 'One', description: 'Item A', unitprice: '10'},
        { code: 'Two', description: 'Item B', unitprice: '22'},
        { code: 'Three', description: 'Item C', unitprice: '56'}
    ]
},

methods: {
    addRow(){
       this.rows.Push(''); // what to Push unto the rows array?
    },
    removeRow(index){
       this.rows.splice(index,1); // why is this removing only the last row?
    }
}
})
arraysvue.jsvuejs2
16
Jeffrey

あなたがしているいくつかの間違いがあります：

  1. addRowメソッドの配列に適切なオブジェクトを追加する必要があります
  2. spliceメソッドを使用して、特定のインデックスで 配列から要素を削除 できます。
  3. 現在の行をpropとしてmy-itemコンポーネントに渡す必要があります。これは変更可能です。

作業コード こちら を確認できます。

addRow(){
   this.rows.Push({description: '', unitprice: '' , code: ''}); // what to Push unto the rows array?
},
removeRow(index){
   this. itemList.splice(index, 1)
}
19
Saurabh

Array.Push()を使用して配列に要素を追加できると思います。

削除するには、リアクティブオブジェクトにthis.$delete(array, index)を使用するのが最適です。

Vue.delete( target, key )：オブジェクトのプロパティを削除します。オブジェクトがリアクティブである場合、削除がビューの更新をトリガーすることを確認します。これは主に、Vueがプロパティの削除を検出できないという制限を回避するために使用されますが、使用する必要はほとんどありません。

https://vuejs.org/v2/api/#Vue-delete

1
Damien Ó Ceallaigh