更改axios資料後，頁面沒有更新解決辦法

• 列子
• 解決

列子

	//頁面檢視HTML
	<span>{{test[0].ress}}</span>
	// 資料請求
	this.axios.get('/list/1').then(res => {
		 // 得到資料
	     this.test = res.data.data	
	     // 對資料批量更改
	      this.test.map((val, index) => {
	        this.axios.get('/list/2'
 
).then(res => {
	          val.ress = res.data.data[0].name
	          this.test.push(val)
	        })
	      })
    })
     // 發現console.log(this.test) 資料得到了更改
     // 但是頁面資料並沒有重新整理
     //嘗試 watch 監聽test資料，然後等待DOm更新 
     watch: {
     	test (val) {
     		this.$nextTick(() => {
				this.test = val
			}
 
)
     	}
     }
     // 失敗，發現，依然是console.log(this.test,val)  ress 都存在，但是檢視依然沒有更新

解決

這裡特別宣告一下vue的資料更新方式，對於陣列，vue只會在使用Array的原生方法更改資料後，才會更新檢視而對於上面 val.ress = res.data.data[0].name 這樣直接對this.test的子物件更改資料，並不會觸發vue的響應更新機制，因為vue的監聽物件壓根就不監聽 這樣的賦值方式,查資料，網上找解決辦法，終於眼前一亮

1.Vue只能使用如下陣列方法，才能響應式更新檢視：
push
pop
shift

	// 這下明白了為什麼檢視沒有響應更新
	//	然後開始解決問題
	 this.axios.get('/list/1').then(res => {
	 // 首先我這裡就不用宣告的test來取值，新建一個data來獲取請求回來的資料
      let data = res.data.data
      // 然後批量處理資料，使用了map，你也可以使用forEach，看個人
      data.map((val, index) => {
      	// 這裡第二次請求更新data中的某一項值或者新增某一項
        this.axios.get('/list/2').then(res => {
        	// 新增ress
          val.ress = res.data.data[0].art_name
          //  賦值完畢後，加入我們在vue中宣告的this.test陣列
          // 這個時候，vue監聽物件監聽到this.test使用了push方法,開始響應更新頁面資料，
          this.test.push(val)
          // 
        })
      })
    })
	

你發現，檢視更新了，恭喜你，也恭喜我，對自己又一次加了一點汽油，讓我們更好的奔跑吧