vuejs绑定动态的值后不随之变化?

书生小兰
  • 29

我想编写一个数量的加减组件,类似于这样,点击加号增加数量,点击减号减少数量。
clipboard.png
问题是加号我需要做限制,每一行都不能大于它本来的数量,这个数量是从list里面取出来的,是动态的,现在我使用v-bind到一个自定义属性上,然后取出来,

<div class="num-container">
            <span class="num-cicle num-minus" :data-num="goods.number" @click="count(goods,-1)">-</span>
            <span>{{goods.number}}</span>
            <span class="num-cicle num-plus" :data-num="goods.number" @click="count(goods,1,$event)">+</span>
          </div>

方法

count(val,num,e){
        if(num>0){
          let tempValue=val.number+1;
          if(tempValue>e.target.getAttribute('data-num')){
            Toast("数量不能大于最大签收数量")
          }else{
            val.number++;
          }
        }else{
          if(val.number > 0){
            val.number--;
          }else{
            Toast("数量不能再少了")
          }
        }
      }

但是由于是v-bind,所以我每次取出来的值都是改完了之后的值,无法达到我想要的效果。这里的难点是每一行的数量都是从list里取出来的动态值,我通过代码更改了之后if这个条件永远无法满足,各位有什么好办法吗?

回复
阅读 3.1k
1 个回答
✓ 已被采纳

组件设计的有点问题,num-container 这个组件应该接受两个属性,一个 max-num 表示数量的最大值,一个是 num 表示现在展示的值,然后通过 .syncnum 属性做一个双向绑定

改写一下你的代码,思路如下:

// num-container.vue
<template>
    <div class="num-container">
        <span class="num-cicle num-minus" @click="count(-1)">-</span>
        <span>{{ num }}</span>
        <span class="num-cicle num-plus" @click="count(1)">+</span>
    </div>
</template>

<script>
export default {
    props: ['num', 'maxNum'],
    methods: {
       count (val) {
           const nextNum = this.num + val
           if (nextNum > this.maxNum) {
               Toast("数量不能大于最大签收数量")
           } else if (nextNum < 0) {
               Toast("数量不能再少了")
           } else {
               // num 与父组件进行了双向绑定,通过 $emit 来更新
               this.$emit('input', nextNum)
           }
        } 
    }
}
</script>

然后 num-container 组件就可以这么用了:

<template>
    <num-container
        v-for="goods in list"
        :num.sync="goods.number"
        :max-num="goods.maxNumber">
    </num-container>
</template>

<script>
export default {
    created () {
        // 需要给 list 中的每一列加个 maxNumber 属性
        this.list = this.list.map(item => ({ ...item, maxNumber: item.number }))
    }
}
</script>

当然要解决你上面的问题,最简单的方法,就是像我上面的 created () 函数那样,在 goods 对象上加个 maxNumber 的属性,然后每次判断都只去判断 maxNumber

宣传栏