<template id="CartRecord">
<div>
<input type="checkbox" name="ids[]" :id="'id'+options.id" :checked="options.buy" v-model="options.buy">
<span>{{options.name}}</span>
<button @click="minus(options)" :disabled="!options.buy">-</button>
<input type="text" name="nums[]" :id="'num'+options.id" :value="options.num" v-model="options.nums" :disabled="!options.buy">
<button @click="plus(options)" :disabled="!options.buy">+</button>
* {{options.price}} = {{options.nums * options.price}}
<button @click="giveup($index)">×</button>
</div>
</template>
<div class="cart">
<div v-for="item in items">
<cart-record :options="item" :plus="plus" :minus="minus" :giveup="giveup"></cart-record>
</div>
<h1>{{totalPrice}}</h1>
</div>
var cart=new Vue({
el:".cart",
data:{
items:[
{
id:10,
name:'脚垫',
nums:2,
price:1500,
buy:true
},{
id:20,
name:'坐椅',
nums:1,
price:2000,
buy:true
}
]
},
methods:{
plus:function(options){
options.nums++;
},
minus:function(options){
options.nums--;
},
giveup:function(index){
if(this.items.index) this.items.splice(index,1);
}
},
computed:{
totalPrice:function(){
var s=0,items=this.items;
for(var n in items){
if(items[n].buy)
s+= items[n].nums * items[n].price
}
return s;
}
},
components:{
'cartRecord':{
template:"#CartRecord",
props:['options','plus','minus']
}
}
})
这个就太奇怪了,点击叉按钮,就报错,说scope.giveup
不是个函数。它的绑定方法明明跟plus
还有minus
是一模一样的啊,为什么它就不正常啊??救命!!!!!
是不是因为components里面props中把giveup少写了?在你贴出代码的最后。