今天做項目的時候遇到了這樣一個需求：有一個小商店浓利，總共出售十幾樣商品，每個商品都有單獨(dú)的編輯加減數(shù)量钞速，有點(diǎn)像購物車一樣贷掖。
然后我的第一想法就是用數(shù)組來遍歷每一個v-model的值，然后發(fā)現(xiàn)好像是可行的玉工。但是這時候問題出現(xiàn)了羽资，我點(diǎn)擊加一減一的時候，view卻沒有更新遵班，
然后就去網(wǎng)上查了一些資料屠升，然后才知道其中的原因，現(xiàn)在來給大家分享一下狭郑。
HTML代碼
<div class="goods" v-for="(item,idx) in goodsList" :key="item.id">
<!-- 數(shù)量減少 -->
<div class="reduce" @click="reduce(idx)" ref="reduce" v-else><span>-</span></div>
<!-- 手動輸入 -->
<input type="text" v-model="inputArr[idx]" maxlength="3" @input="onInput(idx)" @blur="onBlur(idx)">
<!-- 數(shù)量增加 -->
<div class="add" @click="add(idx)" ref="add" v-else><span>+</span></div>
</div>
JS代碼
data:{
goodsList: [{
id:1,
num: 0,
price: 20,
}, {
id:2,
num: 0,
price: 30,
}, {
id:3,
num: 0,
price: 20,
}, {
id:4,
num: 0,
price: 40,
}, {
id:5,
num: 0,
price: 30,
}, {
id:6,
num: 0,
price: 120,
}, {
id:1,
num: 0,
price: 200,
}, {
id:7,
num: 0,
price: 203,
}, {
id:8,
num: 0,
price: 201,
}\],
inputArr: [0, 0, 0, 0, 0, 0, 0, 0],
},
methods: {
//減少積分
reduce: function(idx) {
this.inputArr[idx] -= 1
},
//增加積分
add: function(idx) {
this.inputArr[idx] += 1
},
// 手動輸入數(shù)量
onInput: function(idx) {
// 只能輸入數(shù)字
var reg = /[^\d]/g;
if (reg.test(that.inputArr[idx])) {
that.inputArr[idx] = 1;
}
},
// 失去焦點(diǎn)
onBlur:function(idx){
if (this.inputArr[idx] <= 0 || this.inputArr[idx] == '') {
this.inputArr[idx] = 0;
}
},
}
運(yùn)行結(jié)果
這里就不上截圖了腹暖，直接說結(jié)果了（當(dāng)然，如果想自己操作的小伙伴可以自己試一下）翰萨，結(jié)果就是不管你怎么點(diǎn)擊加號或者減號脏答，視圖都不會改變，還是默認(rèn)值0,那這是為什么呢？
這是因為vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的機(jī)制是數(shù)據(jù)劫持殖告，也就是在所有對象上有個Object.defineProperty()方法阿蝶，通過監(jiān)聽set，get方法去實(shí)現(xiàn)黄绩，而數(shù)組沒有這兩個方法羡洁，所以就不會更新view；解決方案就是爽丹，需要我們主動通知vue筑煮；
解決方案：
方案1：
//減少積分
reduce: function(idx) {
vm.$set(this.inputArr, idx,this.inputArr[idx]-=1)
},
//增加積分
add: function(idx) {
vm.$set(this.inputArr, idx,this.inputArr[idx]+=1)
},
// 手動輸入數(shù)量
onInput: function(idx) {
// 只能輸入數(shù)字
var reg = /[^\d]/g;
if (reg.test(that.inputArr[idx])) {
that.inputArr[idx] = 1;
}
},
// 失去焦點(diǎn)
onBlur:function(idx){
if (this.inputArr[idx] <= 0 || this.inputArr[idx] == '') {
vm.$set(this.inputArr, idx, 0)
}
},
方案2：
//減少積分
reduce: function(idx) {
Vue.set(this.inputArr, idx,this.inputArr[idx]-=1)
},
//增加積分
add: function(idx) {
Vue.set(this.inputArr, idx,this.inputArr[idx]+=1)
},
// 手動輸入數(shù)量
onInput: function(idx) {
// 只能輸入數(shù)字
var reg = /[^\d]/g;
if (reg.test(that.inputArr[idx])) {
that.inputArr[idx] = 1;
}
},
// 失去焦點(diǎn)
onBlur:function(idx){
if (this.inputArr[idx] <= 0 || this.inputArr[idx] == '') {
Vue.set(this.inputArr, idx, 0)
}
},
方案3：
//減少積分
reduce: function(idx) {
that.inputArr.splice(idx, 1, that.inputArr[idx] -= 1);
},
//增加積分
add: function(idx) {
that.inputArr.splice(idx, 1, that.inputArr[idx] += 1);
},
// 手動輸入數(shù)量
onInput: function(idx) {
// 只能輸入數(shù)字
var reg = /[^\d]/g;
if (reg.test(that.inputArr[idx])) {
that.inputArr[idx] = 1;
}
},
// 失去焦點(diǎn)
onBlur:function(idx){
if (this.inputArr[idx] <= 0 || this.inputArr[idx] == '') {
this.inputArr.splice(idx, 1, "0");
}
},
注意:
1、 因為vue本身可以監(jiān)聽到數(shù)組的一些方法,例如: push(),pop(),shift(),unshift(),splice(),sort(),reverse()
2粤蝎、因為input標(biāo)簽里的數(shù)值是字符串類型真仲，我們編輯然后再+1的時候，它的數(shù)值可能就不是我們想要得到的那個了初澎。例如：你輸入了99秸应，然后再點(diǎn)擊加號，正常+=1的話是等于100谤狡，但是這個時候99為字符串類型灸眼，+1之后會變成991，所以不要忘記了在數(shù)量做加減操作時墓懂，先把字符串類型轉(zhuǎn)成數(shù)字類型哦
//在加減方法前面加上這句即可
this.inputArr[idx] = Number(this.inputArr[idx])
好了，文章內(nèi)容就到這里了霉囚，如果對您有幫助的話捕仔，記得點(diǎn)個小愛心支持一下哦，謝謝您盈罐！
