How can I select the input value after clicking on a button?

Question

When I click on Edit button, whatever prefetched value of input is there should be selected, so that it can be edited further. What shall I write in function to highlight/select the msg value which can be edited?

Answer 1

<template>
  <div>
    <button @click="handleClick">CLick me </button>
    <input ref="myInputRef" v-model="msg" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const msg = ref('World');
const myInputRef = ref(null)

function handleClick() {
  if (myInputRef.value) {
    myInputRef.value.select();
  }
}
</script>

I believe this is how you can solve this issue: create a ref for the input element and call the .select() method to select the content.