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>

run on jsfiddle

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

Answer 1

首先，您的input必须位于#app元素内。目前，Vue实例甚至没有监视您的。

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

此外，您的A.a = 1不会执行任何操作。如果您使用console.log的A值，则在任何地方都不会看到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实例之外的变量。

Answer 2

在vue中实现模型的代码很简单：

var v1 = new Vue({
    el:'#vue1',
  data:{
    msg:'demo'
  }
});

而html为：

<div id='vue1'>

<input type='text' v-model='msg' />
<p>
{{msg}}
</p>
</div>

第一个问题是范围。由于在您的Vue实例中，您要提供的元素ID为#app，因此所有与Vue相关的标记都应位于ID为app的元素中，在您的情况下为div。

第二，保存数据的方式是，一旦使用v-model指令，它将直接观察模型中的更改并相应地对dom进行更改。您不需要getter和setter方法。

最后，关于A类的代码是什么？请仔细阅读javascript手册，因为它超出了本问题的范围，无法详细解释所有部分。 Here is the updated fiddle

Answer 3

您的getter和setter很好。（在此示例中，它们并不是绝对必要的，因为它们没有做任何事情来修改用户输入，但是出于您的问题，我认为这是一种简化。）

您的代码有两个独立的问题：

输入字段位于Vue根节点之外，因此框架看不到它。 [您在问题的后期编辑中对此进行了更正。]
您要在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>

vue如何在v模型上使用getter setter？

3 个答案: