When input and textarea are bound with v-model in Mini Program's mpvue, the cursor automatically runs to the end when the data is deleted or changed.

1. In mpvue Mini Program, when I am in the textarea tag, when I use v-model to bind data, when I want to modify the data inside (such as deleting a few words in the middle of a paragraph), when I move the cursor to the position I want to delete, the first time I click to delete, the cursor will automatically return to the end of the paragraph, input tag is the same problem.
2. Although this problem was solved when using v-model.lazy, when I filled out the form and clicked submit, the data was not passed to the background. I looked at the mpvue document. Although v-model.lazy belongs to the change event in vue, in mpvue, the change event is automatically converted into a blur event, so the data is bound only when the input box form loses focus, and when there is no focus, Click the submit button directly, and the data is not bound, so it is not submitted to the background.

in the end, who can give a better solution, which can not only make the cursor normal, but also bind and pass it to the background immediately?

: 

the device used is: the iPhone6s system is IOS11.3,. Wechat version is 6.6.6

.
Mar.04,2021

is now resolved. The disadvantage of using the lazy modifier is that the lazy modifier will be compiled by Vue into a change event, while mpvue will convert the change event into a blur event, that is, when the cursor moves away, the data value will be bound. So this will lead to, if the user entered the last input box (using the lazy modifier), did not move the cursor, but directly click submit, then the last submission will be ignored, looking at the underlying source code, because the blur event triggered after clicking on submit, relatively slow, so the current solution is:
1, use the lazy modifier, that is, v-model.lazy for data binding.
2, in the data transfer or call the interface, or submit, do a delay, using setTimeout delay of about 100ms
advantage: in this way, data binding, the cursor will not flash, at the same time, in the delete, the cursor will not automatically return to the end, but also to solve the problem that the submission blur time is too slow.
disadvantage: even if you use vmurmodel.lazy, when you encounter a timer to modify data in real time, there will be a certain bug


do you add a logic to the submit button, manual blur input box?


in original chain of mpvue documents Article 3 mentions
rational use of two-way binding it is recommended to use v-model.lazy binding to optimize performance. In addition, there may be a cursor reset problem when v-model is entered in the input box under the old basic library.

so using v-model.lazy can solve your problem of abnormal cursor.

explanation in the vue document:
ide/forms.html-sharplazy" rel=" nofollow noreferrer "> .input
by default, v-model performs Synchronize between the value of the input box and the data after each input event is triggered (except when the above input method combines text). You can add the lazy modifier instead of using the change event for Synchronize

Menu