vue中元件的資料已經發生更新,但是頁面未發生更新

2021-10-09 05:42:17 字數 2162 閱讀 2185

父元件通過請求拿到資料後,在父元件中對資料進行處理,處理完成後通過props傳遞給子元件進行渲染,此時在子元件中修改資料後,通過vue devtools檢視資料以及修改完成,但是頁面並沒有重新整理。

父元件**

// 父元件

"data"

>

<

/dataupdate>

<

/div>

<

/template>

import dataupdate from

"./dataupdate"

;export

default,,

,,,,

]}},

components:

, methods:)}

},created()

}<

/script>子元件**

// 子元件

ref=

"multipletable"

:data=

"multipletable"

tooltip-effect=

"dark"

style=

"width: 100%"

>

"55"

>

"header"

>

選擇<

/span>

<

/template>

"scope"

>

"scope.row.checked"

>

<

/el-checkbox>

<

/template>

<

/el-table-column>

label=

"日期"

width=

"120"

>

"scope"

>

}<

/template>

<

/el-table-column>

prop=

"name"

label=

"姓名"

width=

"120"

>

<

/el-table-column>

prop=

"address"

label=

"位址"

show-overflow-tooltip>

<

/el-table-column>

<

/el-table>

<

/template>

export

default},

}<

/script>

通過該方式可以實現資料重新整理頁面也重新整理,但是當資料較多時,頁面會出現卡頓的現象。

使用this.$forceupdate()方法進行強制重新整理。

vue的資料是雙向繫結的,在元件中vue通過觀察者模式對資料進行監聽,但是在此問題中我們對資料通過屬性追加的形式進行了修改,因此vue對追加的屬性的監聽會出現紕漏,所以會出現元件資料更新了但是頁面並沒有重新整理的問題。
資料修改方式

更換資料修改方式後,子元件的資料更新頁面也會及時重新整理。

// 父元件
"updatadata"

>

<

/dataupdate>

<

/div>

<

/template>

import dataupdate from

"./dataupdate"

;export

default,,

,,,,

],updatadata:

,}},

components:

, methods:)}

)}},

created()

}<

/script>

vue 元件中陣列的更新

今天寫專案時遇到的問題,瞬間就卡在那了 來還原一下 parent.vue change for item in list key item.id list item.list child.vue 我預想中的正常情況應該是點選按鈕,然後 頁面上的 000 000 000 變成 000 123 000 ...

vue元件中swiper沒有生效或者發生錯誤

data function 下面來解釋下兩行 的作用 1 observer 啟動動態檢查器 ob 觀眾 者 當改變swiper的樣式 例如隱藏 顯示 或者修改swiper的子元素時,自動初始化swiper。預設false,不開啟,可以使用update 方法更新 2 observeparents 將o...

Vue 元件中的data資料

1.元件可以有自己的 data 資料 2.元件的 data 和 例項的 data 有點不一樣,例項中的 data 可以為乙個物件,但是 元件中的 data 必須是乙個方法 3.元件中的 data 除了必須為乙個方法之外,這個方法內部,還必須返回乙個物件才行 4.元件中 的data 資料,使用方式,和...