首页 > 奇怪的现象,有的方法能绑上,有的绑不上。

奇怪的现象,有的方法能绑上,有的绑不上。

<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)">&times;</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少写了?在你贴出代码的最后。

【热门文章】
【热门文章】