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?
}
}
})
あなたがしているいくつかの間違いがあります:
addRow
メソッドの配列に適切なオブジェクトを追加する必要がありますsplice
メソッドを使用して、特定のインデックスで 配列から要素を削除 できます。my-item
コンポーネントに渡す必要があります。これは変更可能です。作業コード こちら を確認できます。
addRow(){
this.rows.Push({description: '', unitprice: '' , code: ''}); // what to Push unto the rows array?
},
removeRow(index){
this. itemList.splice(index, 1)
}
Array.Push()
を使用して配列に要素を追加できると思います。
削除するには、リアクティブオブジェクトにthis.$delete(array, index)
を使用するのが最適です。
Vue.delete( target, key )
:オブジェクトのプロパティを削除します。オブジェクトがリアクティブである場合、削除がビューの更新をトリガーすることを確認します。これは主に、Vueがプロパティの削除を検出できないという制限を回避するために使用されますが、使用する必要はほとんどありません。