Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式

發(fā)布時間：2020-08-26 00:19:45 來源：腳本之家閱讀：825 作者：仙人掌的成長欄目：web開發(fā)

在使用數(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,導致頁面得數(shù)據(jù)不會改變。

有三種解決方式。

一、使用全局得set方法。

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

二，強制更新

this.$forceUpdate()

以上這篇Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細節(jié)

Vue 數(shù)組和對象更新,但是頁面沒有刷新的解決方式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽