Home » vue » How to get the value of the ref attribute,

How to get the value of the ref attribute,

Posted by: admin November 26, 2021 Leave a comment

Questions:

How to get the value wwww of the ref attribute?

    <form @submit.prevent enctype="multipart/form-data">
        <input type="file" ref="wwww" @change="selectFile">
    </form>

I do like this:

console.log(this.$refs.wwww)

But instead of a value, I get like this:

<input type="file">

I need it like this: wwww

Answers:

The point of refs is precisely to get a reference to a DOM element. If you’re trying to save arbitrary data on your element and access it via JavaScript, I’d recommend using data attributes:

<input type="file" ref="inputElement" data-whatever="wwww">

Then access it like so:

const { inputElement } = this.$refs;
console.log(inputElement.dataset.whatever); // "wwww"

See also Using data attributes and Template refs.