Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式
更新時間：2019年11月09日 16:49:06 作者：仙人掌的成長
今天小編就為大家分享一篇Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在使用數(shù)組的時候，數(shù)組內(nèi)部數(shù)據(jù)發(fā)生改變，但是與數(shù)組綁定的頁面的數(shù)據(jù)卻沒有發(fā)生變化。
<ul>
<li v-for="(item,index) in todos" :key="index">{{item.name}}</li>
</ul>
data () {
return {
msg: 'Welcome to Your Vue.js App',
todos: [{
name: 'aa',
age: 14
}, {
name: 'bb',
age: 15
}, {
name: 'cc',
age: 16
}],
obj: {name: 'lihui', age: 17}
}
},
methods: {
changeTodos: function () {
var _this = this
_this.todos[0] = {
name: 'zhangsan',
age: 15
}
console.log(this.todos)
/*
this.$set(this.todos, 0, 'nn')
this.$forceUpdate()
*/
}
這種修改得方式，無法出發(fā)數(shù)組得set,導(dǎo)致頁面得數(shù)據(jù)不會改變。
有三種解決方式。
一、使用全局得set方法。
this.$set(this.todos,0,{name: 'zhangsan',age: 15})；或者對象this.$set(this.obj,'key',value);
二，強(qiáng)制更新
this.$forceUpdate()
以上這篇Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了VueJS實現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
今天小編就為大家分享一篇vue表單數(shù)據(jù)交互提交演示教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在Vue項目中使用Element UI的表格組件時,可以通過具體的單元格渲染方法添加超鏈接,在表格的某列中,利用模板或渲染函數(shù)插入<a>標(biāo)簽,設(shè)置其href屬性指向目標(biāo)URL,實現(xiàn)點擊跳轉(zhuǎn)功能,此方法適用于需要從表格信息中快速導(dǎo)航到相關(guān)詳細(xì)頁面的場景2024-09-09
這篇文章主要介紹了vue如何使用笛卡爾積算法構(gòu)建sku表格問題，具有很好的價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue內(nèi)嵌iframe跨域通信,主要介紹了Vue組件中如何引入iframe，vue如何獲取iframe對象以及iframe內(nèi)的window對象，結(jié)合實例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
基于vue-cli vue-router搭建底部導(dǎo)航欄移動前端項目
這篇文章主要介紹了基于vue-cli vue-router搭建底部導(dǎo)航欄移動前端項目,項目中主要用了Flex布局，以及viewport相關(guān)知識，已達(dá)到適應(yīng)各終端屏幕的目的。需要的朋友可以參考下2018-02-02
之所以封裝全局組件是為了省事,所有的目的,全都是為了偷懶,下面這篇文章主要給大家介紹了關(guān)于用vue3簡單封裝table組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了在Vue3里使用scss實現(xiàn)簡單的換膚功能,主題色切換、亮色模式和暗黑模式切換、背景圖切換,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vueCl如何 查看打包后文件的大小占比問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3?hook重構(gòu)DataV的全屏容器組件詳解
這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04