this.$refs.name.select() function not found in vue

Question

I am using Vue refs in my application so that in click a button some text will be select and copy. So I am using like

//In template
<input type="text" ref="url" value="my url"/>
<button @click="copylink">Copy Link</button>


//in methods
copylink() {
    this.$refs.url.select()
}

that is undefined.

But Using

document.querySelector('input').select()

I can select that.

My question is it possible all document methods using $refs. How do you do this?

Answer 1

If you do console.log(this.$refs.url) it will give you back an array type result. All you have to do is: this.$refs.url[0].select() and it will work.

Let me know.