How to trigger input focus event inside method in Vue.js?

Question

I have an input that uses the following events:

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

How do I use this inside @focus="$event.target.select()" Event:

The above method copies the value. I need to trigger the above selection focus event when the user clicks copy How can this be done correctly?

Answer 1

Provide a reference for your input:

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

Then anywhere in the component script:

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

Answer 2

Add saved method as focus event handler:

@focus="saved"

method:

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

edit:

Try adding ref to the input element

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

Then trigger focus programmatically within the method:

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