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

Question

我想编写一个数量的加减组件，类似于这样，点击加号增加数量，点击减号减少数量。

问题是加号我需要做限制，每一行都不能大于它本来的数量，这个数量是从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这个条件永远无法满足，各位有什么好办法吗？

Answer 1

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

改写一下你的代码，思路如下：

// 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。