vue 如何在 v-model 上使用 getter setter？

Question

<div id="app">
  <input v-model="msg"/>
  <p>{{ msg }}</p>
</div>

<script>
class A{

}
A.a = 1
new Vue({
  el: '#app',
  data: {
  },
  computed: {
    msg: {
      cache: false,
      set: function(val){
            A.a = val
      },
      get: function(){
        return A.a   
      }
    }
  }
})
</script>

在 jsfiddle 上运行

vue 如何在 v-model 上使用 getter setter？我尝试在 v-model 上使用 getter 和 setter，但没有用。

Answer 1

首先，你input必须在#app元素内部。您的当前甚至没有被 Vue 实例监视。

<div id="app">
  <input v-model="msg"/>
  <p>{{ msg }}</p>
</div>

另外，你A.a = 1什么也没做。如果你有console.logA的价值，你就不会去a任何地方。实例化 A 并a在其构造函数中添加变量：

class A {
    constructor(a) { this.a = a}
}
let myA = new A(0)

使用这样的 Vue 实例，它会起作用：

new Vue({
  el: '#app',
  data: {
    a: myA.a = 1
  },
  computed: {
    msg: {
      set: function(val) {
        this.a = val
      },
      get: function() {
        return this.a
      }
    }
  }
})

但是，我会将类实例化移至数据：

data() {
    return {
        a: new A(1).a
    }
},

如果您保留a数据之外，您的 setter 将工作并更新值，但您的 getter 不会，因为不会观察到 Vue 实例外部的变量。