vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案

更新時(shí)間：2022年06月22日 14:55:55 作者：旺仔蘿卜

這篇文章主要介紹了vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)前激活路由的方法
下面小編就為大家分享一篇vue獲取當(dāng)前激活路由的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue 公共列表選擇組件,引用Vant-UI的樣式方式
這篇文章主要介紹了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)效果的示例代碼
這篇文章主要介紹了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)組件詳解
本文介紹了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
vue實(shí)現(xiàn)輪播圖片
這篇文章主要為大家詳細(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