vue 组件数据错误

2017-08-26 14:56:32 +08:00
 ninestep

目前刚刚开始学习 vue,编写了一个小组件,但是这个组件再一个地方可以用,但是再其他地方会发生赋值错误

```

```
var num = {
props: ['index', 'num', 'min', 'max', 'step'],
template: '<div><span class="jia" @click="change(-1,min,max)">-</span>\n' +
'<input class="num" v-model="count" :value="count">\n' +
'<span class="jian" @click="change(1,min,max)">+</span></div>',
data: function () {
    return {
        count: this.num,
        cindex: this.index,
    }
},
methods: {
    change: function (type, min, max) {
        var num1 = this.count + type * this.step;
        if (num1 >= min && num1 <= max) {
            this.count = num1;
            this.$emit('change', [this.index, num1]);
        }
    },
}

};

```

```
其中正确的地方我是这么调用的
<num :index="index" v-on:change="change" :num="item.num" :min="item.minimum" :max="item.goods_stock" step=1></num>

错误的地方

<num  v-on:change="change" :index="1" :num="goodsInfo.minimum" :min="goodsInfo.minimum" :max="goodsInfo.goods_stock" step=1></num>

其中 index 因为没有直接赋值一个固定的数

这是为啥了,一个可以成功赋值,另一个 vue 组件内部的 count 是 undefined 状态

2242 次点击
所在节点    Vue.js
3 条回复
cephei
2017-08-26 17:07:03 +08:00
props 要传的是变量
stiekel
2017-08-26 18:39:41 +08:00
问题在这里:
:index="1"
改为
index="1"
SilentDepth
2017-09-10 02:18:10 +08:00
如果没有其他报错的话,这段代码看起来并没有问题。组件的 count 只与属性 num 有关,第 2 个例子里属性 num 被传入 goodsInfo.minimum,确定这个变量是有值的吗?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/385950

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX