Get reference to element in method in Vue.js

Question

How can I get reference to the element that fired the method in Vue.js? I have HTML like this:

 <input type="text" v-model="dataField" v-bind:class="dataFieldClass" /> 

And in my Vue.js viewmodel I have a method:

dataFieldClass: function () {     // Here I need the element and get its ID     // Pseudo code     var elementId = $element.id; } 

I know that it's possible to get the element from event (v-on:click), but this is not an event, it's a simple method returning CSS class for the element according to few conditions of the viewmodel. It should be computable as well, but the problem is the same.

Answer 1

You can get the reference to your element in three ways

1. with Method Event Handlers (doc)

template:

<input type="text" v-model="dataField" v-bind:class="dataFieldClass" /> 

script:

dataFieldClass: function (e) {     const element = e.target; } 

2. with Inline Handlers (doc)

template:

 <input type="text" v-model="dataField" v-bind:class="dataFieldClass($event, otherArgument)" /> 

script:

dataFieldClass: function (e, otherArgument) {     const element = e.target; } 

3. with Refs (doc)

template:

 <input type="text" v-model="dataField" v-bind:class="dataFieldClass" ref="el"/> 

script:

dataFieldClass: function () {     const element = this.$refs.el; } 

Answer 2

Maybe you could use ref?

<input type="text" v-model="dataField" v-bind:class="dataFieldClass" ref="el" /> 

And use it like this:

dataFieldClass: function () {     var elementId = this.$refs.el; } 

See documentation here: https://vuejs.org/v2/api/#ref