vuejs綁定動態(tài)的值后不隨之變化？

我想編寫一個數(shù)量的加減組件，類似于這樣，點擊加號增加數(shù)量，點擊減號減少數(shù)量。

問題是加號我需要做限制，每一行都不能大于它本來的數(shù)量，這個數(shù)量是從list里面取出來的，是動態(tài)的，現(xiàn)在我使用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("數(shù)量不能大于最大簽收數(shù)量")
          }else{
            val.number++;
          }
        }else{
          if(val.number > 0){
            val.number--;
          }else{
            Toast("數(shù)量不能再少了")
          }
        }
      }

但是由于是v-bind,所以我每次取出來的值都是改完了之后的值，無法達到我想要的效果。這里的難點是每一行的數(shù)量都是從list里取出來的動態(tài)值，我通過代碼更改了之后if這個條件永遠無法滿足，各位有什么好辦法嗎？

回答

編輯回答

殘淚

組件設(shè)計的有點問題，num-container 這個組件應(yīng)該接受兩個屬性，一個 max-num 表示數(shù)量的最大值，一個是 num 表示現(xiàn)在展示的值，然后通過 .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("數(shù)量不能大于最大簽收數(shù)量")
           } else if (nextNum < 0) {
               Toast("數(shù)量不能再少了")
           } 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>

當(dāng)然要解決你上面的問題，最簡單的方法，就是像我上面的 created () 函數(shù)那樣，在 goods 對象上加個 maxNumber 的屬性，然后每次判斷都只去判斷 maxNumber。

2017年1月21日 10:32