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