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，但没有用。

原文由 cyhone 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的 getters 和 setters 都很好。 （在这个例子中它们不是绝对必要的，因为它们没有做任何修改用户输入的事情，但我认为这是为了你的问题的目的的简化。）

您的代码有两个不同的问题：

1. 输入字段在 Vue 根节点之外，因此框架看不到它。 [您在对问题的后期编辑中更正了这一点。]
2. 你在 Vue 之外定义你的数据 ( A.a )，所以框架不知道要观察它的变化。

为了使框架对更改做出反应，您必须将变量 A 放在组件的 data 块中（并且，如果您确实需要外部变量，请将更新后的值复制到其中使用 setter 函数）。

 new Vue({
  el: '#app',
  data: {
    A: { a: 1 } // <-- your external variable, moved to where Vue can see it
  },
  computed: {
    msg: {
      set: function(val) {
        this.A.a = val;
        // If necessary, also copy val into an external variable here
      },
      get: function() {
        return this.A.a
      }
    }
  }
})

 <script src="https://unpkg.com/vue"></script>
<div id="app">
  <input v-model="msg" />
  <p>{{ msg }}</p>
</div>

原文由 Daniel Beck 发布，翻译遵循 CC BY-SA 4.0 许可协议