vue中v-for數據狀態值變瞭,但是視圖沒改變的解決方案

Posted on by

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視圖內容不更新的問題。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：