Posted By: Anonymous
Link to my project:
As of my link above, the is a file named HelloWorld.vue inside the “components” folder:
inputvalue.bbbb is a reactive data which is defined in data option, but
It’s weird that
inputvalue.cccc will become reactive after input with the v-model, but
inputvalue.cccc will not reactive with
In this question (Vue.js bind object properties), the first situation should not be possible.
v-model will automatically use
$set to set the values on nested properties. This ensures this it works with array indices, as well as working for object properties that don’t exist, as per your example.
If you’re unfamiliar with
$set it is documented here:
The code for this part of
v-model in Vue is here:
In your example there are two inputs that use
cccc. As you noticed, if you edit the input that uses
v-model then everything works fine. However, if you use the
@input input first then it doesn’t work, even if you subsequently use the
v-model input. The behaviour is, somewhat oddly, determined by which of those two inputs you edit first.
The reason for that can be seen in the code for
The problem is that
$set will only add a reactive property if the property doesn’t already exist. So if you use the
@input input first it will create a non-reactive
cccc property and once that is created it can’t be made reactive, even if you use
$set. It would have to be removed using
delete before it could be re-added reactively.