关于vux的XNumber组件的@on-change方法

Question

背景是这样的：

我在做一个购物车模块，这里有一个每件商品的数量加减的功能，所以用到了vux的XNumber组件。由于数据是动态获取的，购物车里会有多件商品，XNumber的v-model监听的变量就不能在data里直接定义。
下面是代码节选：

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的数据变化，我就需要请求一次后台，所以用了@on-change方法监听数据的变化。但是这里有一个问题，由于v-model监听的quantityModel[index]是动态渲染的，所以在初次渲染的时候，mod_num方法就会执行一次，甚至多次。这不是我想要的结果。我尝试过直接给XNumber绑定click事件，但是这时候传递给click事件的quantityModel[index]是变化之前的值。
请问大家有其他好的解决方法吗？

Answer 1

经楼上@toBeTheLight兄的提醒，这样修改就可解决问题：

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

这里有两个需要注意的地方

1. 数组modelstate应该在data里定义而不是直接用let在开头定义。用let在开头定义的话，跳到其他路由再跳回来，ajax()就会重新执行多次；
2. 在上面的if语句里面应该有：modelState[i] = true，否则else里面ajax一直不会执行

Answer 2

想了想，用watch也不太合适，这么写吧。

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