Как использовать геттер на V-модели?

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

Как использовать геттер-сеттер на v-модели?Я пытался использовать getter и setter на v-модели, но это не сработало.

Answer 1

Код для реализации модели в 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 вы предоставляете идентификатор элемента как #app, вся связанная с vue разметка должна быть внутри элемента с идентификатором app, в вашем случае div.

Во-вторых, способ сохраненияданные, как только вы используете директиву v-model, они непосредственно наблюдают за изменениями в вашей модели и вносят соответствующие изменения в dom.Вам не нужны методы getter и setter.

Наконец, каков был код класса A ??Пожалуйста, изучите руководства по javascript, потому что этот вопрос выходит за рамки данного вопроса, чтобы подробно объяснить всю эту часть. Вот обновленная скрипка

Answer 2

Ваши геттеры и сеттеры в порядке, как есть.(Они не являются строго необходимыми в этом примере, так как они ничего не делают для изменения пользовательского ввода, но я предполагаю, что это упрощение для целей вашего вопроса.)

Есть две отдельные проблемы сВаш код:

1. поле ввода находится вне корневого узла Vue, поэтому среда не может его увидеть.[Вы исправили это в поздней редакции вопроса.]
2. Вы определяете свои данные (A.a) за пределами Vue, поэтому фреймворк не знает, как наблюдать за изменениями.

Чтобы структура реагировала на изменения, необходимо поместить переменную A в блок data компонента (и, если вам действительно нужна внешняя переменная, скопировать обновленное значение вэто с помощью функции установщика).

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>

Answer 3

Прежде всего, ваш 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 вне данных, ваш установщик будет работать и обновлять значение, но ваш получатель не будет работать, поскольку переменные вне экземпляра Vue не наблюдаются.