vue中v-for數(shù)據(jù)狀態(tài)值變了,但是視圖沒改變的解決方案
v-for數(shù)據(jù)狀態(tài)值變了,但是視圖沒改變
問題現(xiàn)象
1.你在v-for中列表的每個item都有個按鈕，你點擊按鈕，想把按鈕的類名通過一個屬性show,type為boolean來動態(tài)的選擇
2.v-show通過每個item這個show的true還是false來顯示
最后發(fā)現(xiàn)你在點擊后，輸出發(fā)現(xiàn)，true，false都有變，但是感覺似乎試圖沒有重新渲染。通過搜索，發(fā)現(xiàn)v-for對于數(shù)組添加和刪除的操作，不會進行二次絢爛，但是這不是添加和刪除 ，只是進行值狀態(tài)的改變，即修改。似乎感覺以前也是這么寫就沒問題。
問題出現(xiàn)原因
1.你肯定這個屬性是通過下標來動態(tài)添加的，其實本質還是滿足了對數(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屬性寫出來，最后按以往寫法是沒問題的，能實現(xiàn)試圖和數(shù)據(jù)雙向綁定。
所以不同就明顯了，就是差在這個show屬性我這回是通過角標動態(tài)加的。而vue對于這種不能監(jiān)聽的到。
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循環(huán)改變循環(huán)數(shù)據(jù)視圖不更新
在前端開發(fā)中如下圖菜單框架（左側菜單內容由頂部菜單點擊后動態(tài)更新data內 menu:[] ）v-for循環(huán)menu顯示左側菜單
問題：點擊頂部菜單后（menu[]重新賦值），左側菜單不能更新為新的menu[]里的內容。
原因：
- 由于 JavaScript 的限制， Vue 不能檢測以下變動的數(shù)組：
- 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
- 當你修改數(shù)組的長度時，例如： vm.items.length = newLength
解決1
為了避免第一種情況，以下兩種方式將達到像 vm.items[indexOfItem] = newValue 的效果， 同時也將觸發(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)時K值選擇數(shù)組對象的name或其他不唯一值如下圖
原因：key表示的屬性在變化時，強制更新組件，這樣就會解決vue不能檢測數(shù)據(jù)變動導致v-for視圖內容不更新的問題。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue項目如何獲取本地文件夾絕對路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
監(jiān)聽屬性可以針對某個屬性進行監(jiān)聽,當監(jiān)聽的屬性的值發(fā)生了變化,則會執(zhí)行相應的函數(shù),下面這篇文章主要給大家介紹了關于Vue監(jiān)聽屬性的相關資料,需要的朋友可以參考下2021-11-11
Vue2學習筆記之請求數(shù)據(jù)交互vue-resource
本篇文章主要介紹了Vue2學習筆記之數(shù)據(jù)交互vue-resource ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章給大家介紹了Vue3快速實現(xiàn)文件上傳OSS的方法,上傳文件可以說是經典的需求了,在后臺管理項目中隨處可見,一般是由前端進行文件上傳,然后再由后端去處理,本文旨在實現(xiàn)上傳功能,不考慮額外的功能（如文件尺寸限制）,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了vue 獲取視頻時長的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
詳解vue2.0 transition 多個元素嵌套使用過渡
這篇文章主要介紹了詳解vue2.0 transition 多個元素嵌套使用過渡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標經過顯示懸浮框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本篇文章主要介紹了基于vue實現(xiàn)swipe分頁組件實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Vue 動態(tài)路由的實現(xiàn)及 Springsecurity 按鈕級別的權限控制
這篇文章主要介紹了Vue 動態(tài)路由的實現(xiàn)以及 Springsecurity 按鈕級別的權限控制的相關知識，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
vue實現(xiàn)長圖垂直居上 vue實現(xiàn)短圖垂直居中
這篇文章主要為大家詳細介紹了vue彈性布局實現(xiàn)長圖垂直居上，vue實現(xiàn)短圖垂直居中，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10