v-model 如何使 属性 对象具有反应性?
How v-model make a property of object reactive?
Link 到我的项目:
https://codesandbox.io/s/v-model-3j96f
根据我上面的 link,"components" 文件夹中有一个名为 HelloWorld.vue 的文件:
inputvalue.bbbb
是在数据选项中定义的反应性数据,但是
奇怪的是 inputvalue.cccc
在输入 v-model 后会反应,但 inputvalue.cccc
不会反应 @input
。
本题(),第一种情况应该是不可能的
使用 v-model
将自动使用 $set
来设置嵌套属性的值。这确保它适用于数组索引,以及根据您的示例适用于不存在的对象属性。
如果您不熟悉 $set
,请参阅此处:
https://vuejs.org/v2/api/#vm-set
Vue中v-model
这部分的代码在这里:
在您的示例中,有两个使用 cccc
的输入。如您所见,如果您编辑使用 v-model
的输入,则一切正常。但是,如果您首先使用 :value
/@input
输入,则它不起作用,即使您随后使用 v-model
输入也是如此。这种行为有点奇怪,取决于您先编辑这两个输入中的哪一个。
原因可以在 $set
的代码中看到:
问题是 $set
只会在 属性 不存在的情况下添加反应式 属性。因此,如果您首先使用 :value
/@input
输入,它将创建一个非反应性 cccc
属性 并且一旦创建它就不能反应,即使你使用 $set
。必须使用 delete
将其删除,然后才能重新添加它。
Link 到我的项目: https://codesandbox.io/s/v-model-3j96f
根据我上面的 link,"components" 文件夹中有一个名为 HelloWorld.vue 的文件:
inputvalue.bbbb
是在数据选项中定义的反应性数据,但是
奇怪的是 inputvalue.cccc
在输入 v-model 后会反应,但 inputvalue.cccc
不会反应 @input
。
本题(
使用 v-model
将自动使用 $set
来设置嵌套属性的值。这确保它适用于数组索引,以及根据您的示例适用于不存在的对象属性。
如果您不熟悉 $set
,请参阅此处:
https://vuejs.org/v2/api/#vm-set
Vue中v-model
这部分的代码在这里:
在您的示例中,有两个使用 cccc
的输入。如您所见,如果您编辑使用 v-model
的输入,则一切正常。但是,如果您首先使用 :value
/@input
输入,则它不起作用,即使您随后使用 v-model
输入也是如此。这种行为有点奇怪,取决于您先编辑这两个输入中的哪一个。
原因可以在 $set
的代码中看到:
问题是 $set
只会在 属性 不存在的情况下添加反应式 属性。因此,如果您首先使用 :value
/@input
输入,它将创建一个非反应性 cccc
属性 并且一旦创建它就不能反应,即使你使用 $set
。必须使用 delete
将其删除,然后才能重新添加它。