v-for數(shù)據(jù)狀態(tài)值變了,但是視圖沒(méi)改變

問(wèn)題現(xiàn)象

1.你在v-for中列表的每個(gè)item都有個(gè)按鈕，你點(diǎn)擊按鈕，想把按鈕的類名通過(guò)一個(gè)屬性show,type為boolean來(lái)動(dòng)態(tài)的選擇

2.v-show通過(guò)每個(gè)item這個(gè)show的true還是false來(lái)顯示

最后發(fā)現(xiàn)你在點(diǎn)擊后，輸出發(fā)現(xiàn)，true，false都有變，但是感覺(jué)似乎試圖沒(méi)有重新渲染。通過(guò)搜索，發(fā)現(xiàn)v-for對(duì)于數(shù)組添加和刪除的操作，不會(huì)進(jìn)行二次絢爛，但是這不是添加和刪除 ，只是進(jìn)行值狀態(tài)的改變，即修改。似乎感覺(jué)以前也是這么寫就沒(méi)問(wèn)題。

問(wèn)題出現(xiàn)原因

1.你肯定這個(gè)屬性是通過(guò)下標(biāo)來(lái)動(dòng)態(tài)添加的，其實(shí)本質(zhì)還是滿足了對(duì)數(shù)組添加的操作。代碼可能是類似這樣的。

data(){
	productDetailList: [],
				list: [{
						id: 1,
						show: true,
						name: '1111'
					},
					{
						id: 2,
						show: true,
						name: '222'
					},
}

var info = JSON.parse(JSON.stringify(res.data.info))
	this.productDetailList = info.productDetailList
	
	for (var i = 0; i < this.productDetailList.length; i++) {
		this.productDetailList[i].show = true
	}

上面在vue中l(wèi)ist列表這樣我直接把show屬性寫出來(lái)，最后按以往寫法是沒(méi)問(wèn)題的，能實(shí)現(xiàn)試圖和數(shù)據(jù)雙向綁定。

所以不同就明顯了，就是差在這個(gè)show屬性我這回是通過(guò)角標(biāo)動(dòng)態(tài)加的。而vue對(duì)于這種不能監(jiān)聽(tīng)的到。

vue當(dāng)然有解決方案

問(wèn)題解決

使用Vue的set方法，使用之前要引入

<script>
	import Vue from 'vue'

1.頁(yè)面

<view class="item-wrap" v-for="(product,index) in productDetailList" :key="index">
?? ??? ??? ??? ?<button :class="product.show == true ??
?? ??? ??? ??? ?'iconfont icon-weibiaoti1 item-btn' : 'iconfont icon-xiangxia item-btn'"
?? ??? ??? ??? ? @click="show(product,index)"></button>

?? ?<view ?v-show="product.show == true ? true : false">
?? ??? ??? ??? ??? ?<view class="item-grid" style="">

<button type="default" class="fold-btn" @click="hideAll">全部折疊</button>

2.方法

methods: {
			
			hideAll(){
				var arr=this.productDetailList
				for(var i=0;i<arr.length;i++){
					arr[i].show=false
					Vue.set(this.productDetailList,i,arr[i])
				}
			},
			show(product, index) {
				product.show=!product.show
				Vue.set(this.productDetailList,index,product)
			},

v-for循環(huán)改變循環(huán)數(shù)據(jù)視圖不更新

在前端開(kāi)發(fā)中如下圖菜單框架（左側(cè)菜單內(nèi)容由頂部菜單點(diǎn)擊后動(dòng)態(tài)更新data內(nèi) menu:[] ）v-for循環(huán)menu顯示左側(cè)菜單

問(wèn)題：點(diǎn)擊頂部菜單后（menu[]重新賦值），左側(cè)菜單不能更新為新的menu[]里的內(nèi)容。

原因：

• 由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：
• 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue
• 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength

解決1

為了避免第一種情況，以下兩種方式將達(dá)到像 vm.items[indexOfItem] = newValue 的效果， 同時(shí)也將觸發(fā)狀態(tài)更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

避免第二種情況，使用 splice：

example1.items.splice(newLength)

解決2

v-循環(huán)時(shí)K值選擇數(shù)組對(duì)象的name或其他不唯一值如下圖

原因：key表示的屬性在變化時(shí)，強(qiáng)制更新組件，這樣就會(huì)解決vue不能檢測(cè)數(shù)據(jù)變動(dòng)導(dǎo)致v-for視圖內(nèi)容不更新的問(wèn)題。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論