vue中v-for資料狀態值變了,但是檢視沒改變的解決方案

2022-06-21 22:02:19

v-for資料狀態值變了,但是檢視沒改變

問題現象

1.你在v-for中列表的每個item都有個按鈕，你點選按鈕，想把按鈕的類名通過一個屬性show,type為boolean來動態的選擇

2.v-show通過每個item這個show的true還是false來顯示

最後發現你在點選後，輸出發現，true，false都有變，但是感覺似乎試圖沒有重新渲染。通過搜尋，發現v-for對於陣列新增和刪除的操作，不會進行二次絢爛，但是這不是新增和刪除，只是進行值狀態的改變，即修改。似乎感覺以前也是這麼寫就沒問題。

問題出現原因

1.你肯定這個屬性是通過下標來動態新增的，其實本質還是滿足了對陣列新增的操作。程式碼可能是類似這樣的。

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中list列表這樣我直接把show屬性寫出來，最後按以往寫法是沒問題的，能實現試圖和資料雙向繫結。

所以不同就明顯了，就是差在這個show屬性我這回是通過角標動態加的。而vue對於這種不能監聽的到。

vue當然有解決方案

問題解決

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

<script>
	import Vue from 'vue'

1.頁面

<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迴圈改變回圈資料檢視不更新

在前端開發中如下圖選單框架（左側選單內容由頂部選單點選後動態更新data內 menu:[] ）v-for迴圈menu顯示左側選單

問題：點選頂部選單後（menu[]重新賦值），左側選單不能更新為新的menu[]裡的內容。

原因：

由於 JavaScript 的限制， Vue 不能檢測以下變動的陣列：
當你利用索引直接設定一個項時，例如： vm.items[indexOfItem] = newValue
當你修改陣列的長度時，例如： vm.items.length = newLength

解決1

為了避免第一種情況，以下兩種方式將達到像 vm.items[indexOfItem] = newValue 的效果，同時也將觸發狀態更新：

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

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

example1.items.splice(newLength)

解決2

v-迴圈時K值選擇陣列物件的name或其他不唯一值如下圖

原因：key表示的屬性在變化時，強制更新元件，這樣就會解決vue不能檢測資料變動導致v-for檢視內容不更新的問題。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。