在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 關(guān)于vux的XNumber組件的@on-change方法

關(guān)于vux的XNumber組件的@on-change方法

背景是這樣的：

我在做一個(gè)購物車模塊，這里有一個(gè)每件商品的數(shù)量加減的功能，所以用到了vux的XNumber組件。由于數(shù)據(jù)是動(dòng)態(tài)獲取的，購物車?yán)飼?huì)有多件商品，XNumber的v-model監(jiān)聽的變量就不能在data里直接定義。
下面是代碼節(jié)選：
html:
<x-number v-model="quantityModel[index]" :min="1" :max="item.product.num_store" @on-change="mod_num(item.cart_id, index)"></x-number>
js:
data () {
    return {
      quantityModel: [],
    }
},
methods:{
    mod_num (cart_id,index) {
        this.$http({})
    }
}

每一次XNumber的數(shù)據(jù)變化，我就需要請求一次后臺(tái)，所以用了@on-change方法監(jiān)聽數(shù)據(jù)的變化。但是這里有一個(gè)問題，由于v-model監(jiān)聽的quantityModel[index]是動(dòng)態(tài)渲染的，所以在初次渲染的時(shí)候，mod_num方法就會(huì)執(zhí)行一次，甚至多次。這不是我想要的結(jié)果。我嘗試過直接給XNumber綁定click事件，但是這時(shí)候傳遞給click事件的quantityModel[index]是變化之前的值。
請問大家有其他好的解決方法嗎？

回答
編輯回答
凝雅

想了想，用watch也不太合適，這么寫吧。

let modelState = []
data: {
    modle = []
},
methods: {
    xx (index) {
        if (!modelState[i]) {
            return
        } else {
            modelState[i] = true
            ajax()
        }
    }
}
2017年2月26日 04:07
編輯回答
莓森

經(jīng)樓上@toBeTheLight兄的提醒，這樣修改就可解決問題：

data: {
    modle = []，
    modelState = []
},
methods: {
    xx (index) {
        if (!modelState[i]) {
            this.modelState[i] = true
            return
        } else {
            ajax()
        }
    }
}

這里有兩個(gè)需要注意的地方

  1. 數(shù)組modelstate應(yīng)該在data里定義而不是直接用let在開頭定義。用let在開頭定義的話，跳到其他路由再跳回來，ajax()就會(huì)重新執(zhí)行多次；
  2. 在上面的if語句里面應(yīng)該有：modelState[i] = true，否則else里面ajax一直不會(huì)執(zhí)行
2017年6月2日 01:41