我制作了一个组件＆＃34; my-item＆＃34;其中包含三个元素：下拉列表（由＆＃34填充; itemList＆＃34;）和从下拉列表中填充的两个输入框。该组件被认为是一行。
我想从所选项目中获得总计物品sale_price。这是代码：
<div id="app">
<div>
<my-item v-for="(item, index) in items" :itemdata="itemList" :item="item" v-on:remove="removeItem(index)">
</my-item>
{{items}}
</div>
<div>
<button @click="addItem"> Add item </button>
</div>
<hr>
<div class="form-group">
<label> Total</label>
<div>
<input type="text" v-model="transaction.amount" class="form-control">
</div>
</div>
</div>
<template id="item-template">
<div> <label> Item</label>
<select v-model="item.item">
<option v-for="item in itemdata" :value="item"> {{ item.code }} </option>
</select>
<label> Quantity</label>
<input type="text" placeholder="Text" v-model="item.item.quantity">
<label> Price</label>
<input type="text" placeholder="value" v-model="item.item.sale_price">
<button v-on:click= "remove"> X </button>
</div>
</template>
Vue.component('my-item', {
props: ['itemdata', 'item'],
template: '#item-template',
data: function () {
return {
}
},
methods: {
remove() {
this.$emit('remove');
}
}
}),
new Vue({
el: "#app",
data: {
items: [],
itemList: [{"id":1,"code":"1001","name":"Tiles 2929","cost_price":1000,"sale_price":1100,"branch_id":2,"condition":"Good","quantity":200,"created_at":"2018-04-10 11:26:07","updated_at":"2018-04-12 06:25:08"},{"id":2,"code":"1002","name":"Sliding Doors","cost_price":20000,"sale_price":22000,"branch_id":1,"condition":"Good","quantity":50,"created_at":"2018-04-12 06:25:50","updated_at":"2018-04-12 06:25:50"}],
transaction: {
customer: '',
branch: '',
mode_of_payment: '',
discount: '',
amount: 0
}
},
methods: {
addItem: function(){
this.items.push({item: ''});
},
removeItem: function(index){
this.items.splice(index,1);
}
},
watch:{
items: {
handler: function () {
if(Object.keys(this.items).length > 0) {
for(var i in this.items){
this.transaction.amount += i.item.sale_price
}
}
},
deep: true
}
}
})
控制台始终返回＆＃34; i.item.sale_price未定义＆＃34;请帮忙
抱歉错误。这是我第一次来这里
我似乎无法很好地安排代码。但是这里是文件的链接 Link