I'm making an web application (Server rendered, not SPA), but with some client-side funcionality, such hide element when other element have some value, make HTTP calls or validate some input fields.
Now, I'm using WebComponents (paper-elements and others) to make the UI, and Vanilla JavaScript (with some Polyfills, such WebComponents.js or fetch.js) to do the functionality.
So far, however, I have realized that I have many JavaScript lines to do things (such as hiding an input field if a condition is not met) that could be reduced (or even deleted) with a framework like Vue.js and expresive HTML with directives.
My problem, is when I try to use Vue.js with paper-elements, or other elements, Vue.js directives like v-model don't work (even the paper-element value attribute is value like the standard HTML elements).
I tried using :value instead of v-model, and this works, but only with a single way data binding (this is normal in v-bind) but I need two way data binding in the paper-elements, and v-model don't work.
An idea can be, while using a colon (shorthand of v-bind) to indicate one way data binding, (e.g. :disabled="someCondition"), use two colons to indicate two way data binding in any attribute (in some WebComponents, can be useful do this in other HTML attribute beyond value) (e.g. ::value).
Someone know any framework with expresive HTML like Vue.js thats implements data binding (two way in any html attribute) and basic control structures (like v-if and v-repeat) or do the two ways data binding in any HTML attribute with Vue.js (o more simple, do v-model work with paper-elements).
I don't know making WebComponents feauture of Vue.js, because I use Polymer for do that.
Thanks you!
with VueJs you can do
:value="value" @input="value = $event.target.value"
instead of v-model="value"