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

Question

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

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

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

上述方法復制該值。 我需要在用戶點擊復制時觸發上面的select焦點事件如何才能正確實現呢？

Answer 1

添加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();
     ...
    }
}  

Answer 2

您可以將$event引用到已saved的方法

  <b-nput
        class="input"
        id="link"
        v-model="link"
        placeholder="link"
        @focus="saved"
      ></b-input>


methods: {
  saved(event){
    console.log(event)
  }
}

參考 - https://v2.vuejs.org/v2/guide/events.html

Answer 3

為您的輸入提供ref ：

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

然后在您的組件腳本中的任何地方：

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