vue2 nextTick 改變資料後，基于新建立的DOM元素進行操作

• 錯誤寫法

<template>
	<div>
		<button @click="onClick">edit</button>
    	<input v-show="isEdit" type="text" ref="txt"/>
	<div>
<template>
<script>
export default {
  data() {
    return {
      isEdit: false
    }
  },
  methods: {
    onClick() {
      this.isEdit = true
      // 輸入框需要在生命周期update階段才會顯示出來，此時尚未顯示，調用focus無效
      this.$refs.txt.focus()      
    }
  },
}
</script>           

複制

• 正确寫法

onClick() {
  this.isEdit = true
  // 使用此函數将在下一次DOM更新結束後調用回調函數
  this.$nextTick(function() {
    this.$refs.txt.focus()
  });  
}           

複制