Link to my project:
As of my link above, the is a file named HelloWorld.vue inside the "ponents" folder:
inputvalue.bbbb is a reactive data which is defined in data option, but
It's weird that inputvaluecc will bee reactive after input with the v-model, but inputvaluecc will not reactive with @input.
In this question (Vue.js bind object properties), the first situation should not be possible.
Link to my project: https://codesandbox.io/s/v-model-3j96f
As of my link above, the is a file named HelloWorld.vue inside the "ponents" folder:
inputvalue.bbbb is a reactive data which is defined in data option, but
It's weird that inputvaluecc will bee reactive after input with the v-model, but inputvaluecc will not reactive with @input.
In this question (Vue.js bind object properties), the first situation should not be possible.
Share Improve this question edited Sep 4, 2019 at 3:16 Frederiko Ribeiro 2,3881 gold badge25 silver badges33 bronze badges asked Sep 4, 2019 at 2:09 Zhou TKZhou TK 911 silver badge8 bronze badges 1- please explain your problem properly. – Casper Commented Sep 4, 2019 at 2:21
1 Answer
Reset to default 4Using 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:
https://v2.vuejs/v2/api/#vm-set
The code for this part of v-model in Vue is here:
https://github./vuejs/vue/blob/399b53661b167e678e1c740ce788ff6699096734/src/piler/directives/model.js#L44
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 :value/@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 $set:
https://github./vuejs/vue/blob/399b53661b167e678e1c740ce788ff6699096734/src/core/observer/index.js#L212
The problem is that $set will only add a reactive property if the property doesn't already exist. So if you use the :value/@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.