vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案
vue修改數(shù)據(jù)頁(yè)面無(wú)效
項(xiàng)目開(kāi)發(fā)的過(guò)程中，經(jīng)常會(huì)遇到這種情況：為data中的某一個(gè)對(duì)象添加一個(gè)屬性。
如下案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="addAttribute()">添加屬性方法</button>
<p>student屬性顯示在下面</p>
<ul>
<li v-for="item in student">{{item}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
student: {
name: 'zdx'
}
},
methods: {
addAttribute() {
this.student.age = 18; //為student對(duì)象添加屬性
console.log(this.student);
}
}
})
</script>
</body>
</html>
原因是由于受JavaScript的限制，vue.js不能監(jiān)聽(tīng)對(duì)象屬性的添加和刪除，因?yàn)樵趘ue組件初始化的過(guò)程中，會(huì)調(diào)用getter和setter方法，所以該屬性必須是存在在data中，視圖層才會(huì)響應(yīng)該數(shù)據(jù)的變化，針對(duì)這個(gè)問(wèn)題
有兩種解決方案
1.this.$set(obj, key, value) 或 vue.set(obj, key, value)
methods: {
addAttribute() {
// this.student.age = 18;
this.$set(this.student, 'age', 18);
console.log(this.student);
}
}
2.Object.assign(target, sources)
methods: {
addAttribute() {
// this.student.age = 18;
// this.$set(this.student, 'age', 18);
this.student.age = 18;
this.student = Object.assign({}, this.student);
console.log(this.student);
}
}
更改數(shù)據(jù)后頁(yè)面不刷新的問(wèn)題
今天遇到的，通過(guò)v-if控制標(biāo)簽切換效果，出現(xiàn)沒(méi)任何反應(yīng)的情況。檢測(cè)數(shù)據(jù)正常，只是頁(yè)面沒(méi)有渲染。
查了很多資料因?yàn)閿?shù)據(jù)層次太多，render函數(shù)沒(méi)有自動(dòng)更新，需手動(dòng)強(qiáng)制刷新。
通過(guò)
this.$forceUpdate();
強(qiáng)制刷新即可
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決elementui上傳組件el-upload無(wú)法第二次上傳問(wèn)題
這篇文章主要介紹了解決elementui上傳組件el-upload無(wú)法第二次上傳問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
下面小編就為大家分享一篇vue獲取當(dāng)前激活路由的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程,使用nginx部署前端項(xiàng)目是一篇非常詳細(xì)的教程,旨在幫助初學(xué)者使用Nginx來(lái)部署前端項(xiàng)目,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue下拉框雙向聯(lián)動(dòng)效果,實(shí)現(xiàn)聯(lián)動(dòng)，大家都知道在vue的頁(yè)面中，想要實(shí)現(xiàn)多個(gè)<el-select 下拉框的值動(dòng)態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧2022-04-04
本文介紹了Vue3中的動(dòng)態(tài)組件,通過(guò)`<component :is="動(dòng)態(tài)組件名或組件對(duì)象"></component>`來(lái)實(shí)現(xiàn)根據(jù)條件動(dòng)態(tài)渲染不同的組件,此外,還提到了使用`markRaw`和`shallowRef`來(lái)優(yōu)化性能,避免不必要的響應(yīng)式劫持2025-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的輪播圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue基礎(chǔ)之模板和過(guò)濾器用法實(shí)例分析
這篇文章主要介紹了vue基礎(chǔ)之模板和過(guò)濾器用法,結(jié)合實(shí)例形式分析了vue模板與過(guò)濾器的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
vue自定義組件(通過(guò)Vue.use()來(lái)使用)即install的用法說(shuō)明
這篇文章主要介紹了vue自定義組件(通過(guò)Vue.use()來(lái)使用)即install的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue.js實(shí)現(xiàn)無(wú)限加載與分頁(yè)功能開(kāi)發(fā)
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)無(wú)限加載與分頁(yè)功能開(kāi)發(fā)實(shí)踐，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11