[Vue.js] 筆記-點擊button後,自動focus到input上

遇到個小需求是點擊按鈕後清除資料,並且要focus在第一個input上面,筆記一下做法

1.html

  • 在input加上一個標籤 ref="xxx"
<div id="app">
  <div>
    Test1<input type="text"
                ref="test1">
  </div>
  <div>
    Test2<input type="text">
  </div>
  <div>
    <button @click="run">Button</button>
    
  </div>
</div>

2.js

  • 透過 this.$refs.<refName> 找到元素,就能使用focus()了
new Vue({
  el:"#app",
  methods:{
    run(){
      this.$refs.test1.focus();
    }
  }
})

Sample Code https://codepen.io/ianchen806/pen/KKdvdQQ