如何解決Vue不能檢測數(shù)組或?qū)ο笞儎拥膯栴}-創(chuàng)新互聯(lián)

小編給大家分享一下如何解決Vue不能檢測數(shù)組或?qū)ο笞儎拥膯栴}，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比平桂網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式平桂網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋平桂地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

來看一個實例：

<!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: 更新數(shù)據(jù)，view層未渲染，但通過console這個數(shù)組可以發(fā)現(xiàn)數(shù)據(jù)確實更新了
   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。

點擊之后數(shù)字并沒有在view層更新，而通過console打印發(fā)現(xiàn)數(shù)據(jù)更新了，只是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) {
   // 不是數(shù)組，這里更新數(shù)據(jù)就可以直接在view層渲染
   this.items[index].name += " success";
  // console.log(this.numbers)
  }
  }
 });
 </script>
</body>
</html>

可以看到這里的view層能及時得到更新，但是到了數(shù)組哪里為什么就不可以了呢？

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

由于 JavaScript 的限制，Vue 不能檢測以下變動的數(shù)組：

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

當你修改數(shù)組的長度時，例如：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` 不是響應式的

對于已經(jīng)創(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補充-------------------------------

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

例如：

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

上面是正確做法，下面的做法的話就會報錯了：

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

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

實際上vm.data是undefined。

看完了這篇文章，相信你對“如何解決Vue不能檢測數(shù)組或?qū)ο笞儎拥膯栴}”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站題目：如何解決Vue不能檢測數(shù)組或?qū)ο笞儎拥膯栴}-創(chuàng)新互聯(lián)
當前地址：http://www.rwnh.cn/article4/psdoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、定制開發(fā)、定制網(wǎng)站、移動網(wǎng)站建設、企業(yè)建站、自適應網(wǎng)站

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

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何解決Vue不能檢測數(shù)組或?qū)ο笞儎拥膯栴}-創(chuàng)新互聯(lián)