如何在Vue.js中的方法內觸發輸入焦點事件？

Question

我有一個使用以下事件的輸入：

<b-nput
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            @focus="$event.target.select()"
          ></b-input>

我如何在裡面使用這個 @focus="$event.target.select()" 事件：

上述方法複製該值。當使用者點擊複製時，我需要觸發上述選擇焦點事件 如何才能正確實現？

Answer 1

為您的輸入提供參考：

<b-input
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            ref="theInput"
          ></b-input>

然後在元件腳本中的任何位置：

this.$refs['theInput'].focus();

Answer 2

新增saved方法作為焦點事件處理程序：

@focus="saved"

方法：

methods: {
  saved(event){ //the event is passed automatically as parameter
     event.target.select()
  }
}

編輯：

嘗試將 ref 新增到輸入元素

<b-input
          ref="input"
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
         
            @focus="$event.target.select()"
          ></b-input>

然後在方法內以程式方式觸發焦點：

methods: {
      async copy(s) {
      await navigator.clipboard.writeText(s) 
      this.$refs.input.focus();
     ...
    }
}