首页 > 解决方案 > 当 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
    },
  }
})

标签: vuejs2getter-setterhtml-input

解决方案


推荐阅读