vue中通過this.refs操作DOM時報undefined

vue中通過this.refs操作DOM時的注意事項

在axios請求完成時獲取獲取綁定的ref 爲undefined

vue中this.$nextTick()函數的使用

1. Vue 中的 nextTick 涉及到 Vue 中 DOM 的異步更新
2. Vue 實現響應式並不是數據發生變化之後 DOM 立即變化，而是按一定的策略進行 DOM 的更新
3. $nextTick 是在下次 DOM 更新循環結束之後執行延遲迴調，在修改數據之後使用 $nextTick，則可以在回調中獲取更新後的DOM

axios({
		method: 'get',
		url: 'api',
		params: {
			key: value
		},
		responseType: 'json'
	}).then(response => {
		// 請求成功
	此時在接口成功之後去獲取你渲染出來的ref時 是獲取不到的 顯示爲undefined
 	this.refs.key = undefined
    因爲axios是異步請求 頁面dom還沒更新完成 你此時獲取的ref 是還沒被渲染出來
	解決方案：
	this.$nextTick(function(){
	此時去獲取是可以獲取到的 	this.refs.key  （注意：如果使用的不是箭頭函數，注意此時的this指向）
    })
	}).catch(error => {
		// 請求失敗，
	});

注：這是建立ref綁定的DOM是通過vue(v-for)去渲染出來的