欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何解決Vue不能檢測數組或對象變動的問題

小編給大家分享一下如何解決Vue不能檢測數組或對象變動的問題,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

公司主營業(yè)務:成都網站制作、網站設計、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出內江免費做網站回饋大家。

來看一個實例:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   // WHY: 更新數據,view層未渲染,但通過console這個數組可以發(fā)現(xiàn)數據確實更新了
   if (typeof(this.numbers[index]) === "undefined" ) {
   // 注:下面這么設置是可以的。例如 
   // var arr = [];
   // arr[3]=3;
   // console.log(arr) //[empty × 3, 3]
    this.numbers[index] = 1; 
   // this.numbers.splice(index,0,1) //用splice方法能同步顯示,但得不到想要的效果
   } else {
    this.numbers[index]++;
   // this.numbers.splice(index,1,this.numbers[index]++)
   }
  // console.log(this.numbers)
  }
  }
 });
 
 </script>
</body>
</html>

想實現(xiàn)的效果是點擊 li 看 vm.nymbers[index] 是否存在,不存在設置為1,存在的話加1。

點擊之后數字并沒有在view層更新,而通過console打印發(fā)現(xiàn)數據更新了,只是view層沒有及時的檢測到。

再看一個改動之后的:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <!--<span>{{numbers[index]}}</span>-->
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  // numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   // 不是數組,這里更新數據就可以直接在view層渲染
   this.items[index].name += " success";
  // console.log(this.numbers)
  }
  }
 });
 </script>
</body>
</html>

可以看到這里的view層能及時得到更新,但是到了數組哪里為什么就不可以了呢?

來看Vue2.0官方的文檔說明:

由于 JavaScript 的限制,Vue 不能檢測以下變動的數組:

當你利用索引直接設置一個項時,例如:vm.items[indexOfItem] = newValue

當你修改數組的長度時,例如:vm.items.length = newLength

為了解決第一類問題,以下兩種方式都可以實現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果,同時也將觸發(fā)狀態(tài)更新:

// Vue.set 
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice 
example1.items.splice(indexOfItem, 1, newValue)

你還可以使用 vm.$set 實例方法,它只是全局 Vue.set 的別名。

還是由于 JavaScript 的限制,Vue 不能檢測對象屬性的添加或刪除:

var vm = new Vue({
 data: {
 a: 1
 }
})
// `vm.a` 現(xiàn)在是響應式的
vm.b = 2
// `vm.b` 不是響應式的

對于已經創(chuàng)建的實例,Vue 不能動態(tài)添加根級別的響應式屬性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。例如,對于:

var vm = new Vue({ 
 data: { 
 userProfile: { 
  name: 'Anika' 
 } 
 } 
})

有時你可能需要為已有對象賦予多個新屬性,比如使用 Object.assign() 或 _.extend()。在這種情況下,你應該用兩個對象的屬性創(chuàng)建一個新的對象。所以,如果你想添加新的響應式屬性,不要像這樣:

Object.assign(this.userProfile, { 
 age: 27, 
 favoriteColor: 'Vue Green' 
})

應該這樣做:

this.userProfile = Object.assign({}, this.userProfile, { 
 age: 27, 
 favoriteColor: 'Vue Green' 
})

因此,上面例子應該改為:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   if (typeof(this.numbers[index]) === "undefined" ) {
    this.$set(this.numbers, index, 1);  //(arr,index,newvalue)
   } else {
    this.$set(this.numbers, index, ++this.numbers[index]);
   }
  }
  }
 });
 </script>
</body>
</html>

搞定!

1.17補充-------------------------------

如何理解“對于已經創(chuàng)建的實例,Vue 不能動態(tài)添加根級別的響應式屬性”?

例如:

var vm=new Vue({ 
 el:'#test', 
 data:{ 
  //data中已經存在info根屬性 
  info:{ 
   name:'小明' 
  } 
 } 
}); 
//給info添加一個性別屬性 
Vue.set(vm.info,'sex','男');

上面是正確做法,下面的做法的話就會報錯了:

Vue.set(vm.data,'sex','男')

實際上,不能直接在data上增加屬性,但可以在data里的對象上增加屬性。

實際上vm.data是undefined。

看完了這篇文章,相信你對“如何解決Vue不能檢測數組或對象變動的問題”有了一定的了解,如果想了解更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!

分享標題:如何解決Vue不能檢測數組或對象變動的問題
標題鏈接:http://chinadenli.net/article16/jegdgg.html

成都網站建設公司_創(chuàng)新互聯(lián),為您提供服務器托管、網站維護、小程序開發(fā)Google、網站排名網站營銷

廣告

聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

手機網站建設
国产精品成人一区二区三区夜夜夜| 国产成人精品一区在线观看| 色婷婷日本视频在线观看| 亚洲国产天堂av成人在线播放 | 国产精品日韩精品最新| 手机在线不卡国产视频| 久久免费精品拍拍一区二区| 不卡中文字幕在线免费看| 亚洲一区二区三区熟女少妇| 国产香蕉国产精品偷在线观看| 国产综合欧美日韩在线精品| 乱女午夜精品一区二区三区 | 亚洲精品中文字幕熟女| 亚洲一区二区精品免费视频| 熟女一区二区三区国产| 黄色国产精品一区二区三区| 男人和女人黄 色大片| 国产一区日韩二区欧美| 亚洲欧美一二区日韩高清在线| 青青操视频在线播放免费| 日韩一级一片内射视频4k| 欧美加勒比一区二区三区| 在线免费看国产精品黄片| 免费性欧美重口味黄色| 久一视频这里只有精品| 99久久国产综合精品二区| 亚洲超碰成人天堂涩涩| 日本女优一区二区三区免费| 国产又黄又爽又粗视频在线| 日本成人中文字幕一区| 中文字幕日韩欧美理伦片| 日韩一区二区三区四区乱码视频| 亚洲午夜精品视频观看| 黄色av尤物白丝在线播放网址 | 欧美尤物在线视频91| 欧洲精品一区二区三区四区| 内射精品欧美一区二区三区久久久| 蜜臀人妻一区二区三区| 欧美精品久久99九九| 婷婷伊人综合中文字幕| 欧美一区二区三区不卡高清视|