vuejs2 - 当 v-model 是对象时,如何让 INPUT 元素调用计算属性的底层 v-model 设置器?
问题描述
当更改 INPUT 元素的值时,当元素 v-model 引用对象时,不会调用 setter。通过 click 方法,两个版本的年龄都发生了变化,并且为简单变量和对象调用了 setter。如果我通过输入元素更改年龄,则仅调用简单变量计算设置器。我错过了什么?
https://jsfiddle.net/sday/eywraw8t/411036/
<input type="text" v-model.number="age">
<input type="text" v-model.number="person.age">
new Vue({
el: "#app",
data: {
aperson:{age:25},
iAge:25,
text:""
},
computed: {
age : {
get () {
return this.iAge },
set (value) {
debug(this,"update detected through simple age variable: ");
this.iAge=value;
},
},
person : {
get () {
return this.aperson },
set (value) { // <--- doesn't get called when changing through inputbox
debug(this,"update detected through person object: ");
},
}
},
methods: {
click: function (e) {
this.iAge++;
// this.person.age++; // <--- this also works to increment
this.$set(this.person, "age", this.person.age+1); // <-- thought maybe I had to do this for setter to be called during a change event
},
}
})
解决方案
推荐阅读
- javascript - 如何在 Firestore Web 版本 9(模块化)的集合中获取子集合?
- wso2 - WSo2 身份服务器:用户通过我的帐户自行注册
- python - 名称“结果”未定义 - Python 3
- latex - 在 LaTeX 中 \mathnormal 粗体
- flutter - 所有最终变量都必须初始化,但 '' 不是。尝试为 field.dartfinal_not_initialized_constructor 添加一个初始化器
- php - 如何在 WordPress 定制器中使用 HTML 代码
- javascript - 在服务器上运行的代码在本地主机上运行时会出错
- javascript -
使用 JavaScript 不能正常工作? - php - 从数据库中的表字段中获取 PHP 代码
- docker - 从基于 Alpine 的 k8s pod 访问服务会引发 DNS 解析错误