Vue - access input value inside the input's attribute

Question

Is is possible to access input s value inside it's definition/attribute?

For example, if you want an input to be green if not empty but you don't want to use Vue.data .

Like this:

<v-text-field background-color="'green' ? <THISVAL> : 'red'"></v-text-field> 

Or do I need v-model and variable defined in the Vue.data ?

Answer 1

Yes, you do need v-model and variable defined in the Vue.data .

Why? Remember that vue uses virtual DOM. When this template is being processed for the first time, no actual element is present in DOM, to be access via this . It needs to know what to render into DOM beforehand.

---

There is component-template-refs to gain references to actual HTML elements, but these references are assigned after the component is mount, and not needed for use cases like this