Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
1.3k views
Welcome To Ask or Share your Answers For Others

1 Answer

It's in the documentation about Interpolation and has been deprecated (see. Migration guit from 1.x)

Deprecated

This is the old way

<div class="btn btn-primary hint--top {{class}}"></div>

Solution

Use Javascript expression instead:

<div v-bind:class="'btn btn-success hint--top '+ class "></div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...