SoFunction
Updated on 2025-04-04

Solve the problem that the two-way binding data of the vue project input box does not take effect in real time

I won't say much nonsense, let's just read the code~

<input type="text" maxlength="11" placeholder="Please enter the contact number" v-model="" />

Such an input box is bound to the phone field on the form object in data.

In the mounted hook function, write:

= '1888888888';

This will not change as the input box value changes on the page.

The solution is as follows:

this.$set(,"phone",this.$)

Or bind to a string in data, it can also be solved.

Supplementary knowledge:vue module automation script compilation failed module not found

This problem occurs when vue's for loop changes the key value.

The way to write the beginning (no problem)

<div v-for="(item,index) in " :key="index">

(Writing a problem)

<div v-for="(item) in " :key="">

The way to write the beginning (no problem)

<div class="record-info" v-for="(bb,index2) in " :key="index2">

(Writing a problem)

<div class="record-info" v-for="(bb) in " :key="">

Solution:

1. You can fall back to the original code, only console waring, and both loops take index as key, which does not affect normal compilation and operation.

Found the real reason:

v-for="(bb) in "The problem with this writing style.

If you delete the index, then there is no need for brackets.

Just change it to v-for="bb in".

The above article solves the problem that the two-way binding data of the vue project input input box does not take effect in real time is all the content I share with you. I hope you can give you a reference and I hope you can support me more.