Vue 數(shù)組和對(duì)象更新,但是頁(yè)面沒(méi)有刷新的解決方式

更新時(shí)間：2019年11月09日 16:49:06 作者：仙人掌的成長(zhǎng)

今天小編就為大家分享一篇Vue 數(shù)組和對(duì)象更新,但是頁(yè)面沒(méi)有刷新的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在使用數(shù)組的時(shí)候，數(shù)組內(nèi)部數(shù)據(jù)發(fā)生改變，但是與數(shù)組綁定的頁(yè)面的數(shù)據(jù)卻沒(méi)有發(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()
*/
  }

這種修改得方式，無(wú)法出發(fā)數(shù)組得set,導(dǎo)致頁(yè)面得數(shù)據(jù)不會(huì)改變。

有三種解決方式。

一、使用全局得set方法。

this.$set(this.todos,0,{name: 'zhangsan',age: 15})；或者對(duì)象this.$set(this.obj,'key',value);

二，強(qiáng)制更新

this.$forceUpdate()

以上這篇Vue 數(shù)組和對(duì)象更新,但是頁(yè)面沒(méi)有刷新的解決方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VueJS實(shí)現(xiàn)用戶管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了VueJS實(shí)現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
vue表單數(shù)據(jù)交互提交演示教程
今天小編就為大家分享一篇vue表單數(shù)據(jù)交互提交演示教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue+Element表格超鏈接跳轉(zhuǎn)方式
在Vue項(xiàng)目中使用Element UI的表格組件時(shí),可以通過(guò)具體的單元格渲染方法添加超鏈接,在表格的某列中,利用模板或渲染函數(shù)插入<a>標(biāo)簽,設(shè)置其href屬性指向目標(biāo)URL,實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)功能,此方法適用于需要從表格信息中快速導(dǎo)航到相關(guān)詳細(xì)頁(yè)面的場(chǎng)景
2024-09-09
vue如何使用笛卡爾積算法構(gòu)建sku表格
這篇文章主要介紹了vue如何使用笛卡爾積算法構(gòu)建sku表格問(wèn)題，具有很好的價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue內(nèi)嵌iframe跨域通信的實(shí)例代碼
這篇文章主要介紹了vue內(nèi)嵌iframe跨域通信,主要介紹了Vue組件中如何引入iframe，vue如何獲取iframe對(duì)象以及iframe內(nèi)的window對(duì)象，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下
2022-11-11
基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目
這篇文章主要介紹了基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目,項(xiàng)目中主要用了Flex布局，以及viewport相關(guān)知識(shí)，已達(dá)到適應(yīng)各終端屏幕的目的。需要的朋友可以參考下
2018-02-02
一次用vue3簡(jiǎn)單封裝table組件的實(shí)戰(zhàn)過(guò)程
之所以封裝全局組件是為了省事,所有的目的,全都是為了偷懶,下面這篇文章主要給大家介紹了關(guān)于用vue3簡(jiǎn)單封裝table組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
在Vue3里使用scss實(shí)現(xiàn)簡(jiǎn)單的換膚功能
這篇文章主要介紹了在Vue3里使用scss實(shí)現(xiàn)簡(jiǎn)單的換膚功能,主題色切換、亮色模式和暗黑模式切換、背景圖切換,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2024-12-12
vueCl如何查看打包后文件的大小占比
這篇文章主要介紹了vueCl如何查看打包后文件的大小占比問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue3?hook重構(gòu)DataV的全屏容器組件詳解
這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04