Menu
I have an input field with the value field being passed a string stored in Vuex. The input fields changes are debounced and the new string synced to Vuex.
When bound like this :value="vuexState.myString, when typing, the cursor jumps to the end of the line.
When bound like this value={{vuexState.myString}}, the cursor stays where it is.
According to the guide: http://vuejs.org/guide/syntax.html#Arguments
These two should be the same, with the {{ }} style being internally converted to :bind. Could this be a bug?
My theory is that the cursor jumping occurs because the vuex state change re-renders the input and that the {{ }} style is interpolated only once while the binding syntax re-renders the input every change.
I am currently using value={{vuexState.myString}} but I'd like to know what is happening or if there is a better way to do this.
878
The v-bind directive is a Vuejs directive used to bind one or more attributes, or a component prop to an element. If that attribute is binded to our data defined in Vuejs instance then dynamically changes can be observed as data changes.
The v-model directive makes two-way binding between a form input and app state very easy to implement. One can bind a form input element and make it change the Vue data property when the content of the field changes.
Vue v-model is a directive that creates a two-way data binding between a value in our template and a value in our data properties. A common use case for using v-model is when designing forms and inputs. We can use it to have our DOM input elements be able to modify the data in our Vue instance.
The v-model is a two-way binding which means if you change the input value, the bound data will be changed. The v-model directive is used to create two-way data bindings on form input, textarea, and select elements.
It's in the documentation about Interpolation and has been deprecated (see. Migration guit from 1.x)
This is the old way
<div class="btn btn-primary hint--top {{class}}"></div>
Use Javascript expression instead:
<div v-bind:class="'btn btn-success hint--top '+ class "></div>
Take a look at the console, it seems like it has been deprecated in favour of the colon syntax or v-bind:
vue.js:2237 [Vue warn]: foo="{{foo}}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.
v-text:'something' === {{something}}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
