Get reference to element in method in Vue.js

Question

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;
}