Vue.js似乎没有在变量更新时更新DOM

Question

我相当肯定这是一个非常简单的问题，但我花了大约3个小时试图找出它无济于事。如果我在Vue对象中绑定一个变量，即data: {x: a}a是某个变量，然后我改变了值a，我的印象是它会改变值data.x，不是吗？

我正在尝试一个v-if/ v-elsechain，if语句涉及不等式，但即使它应该评估true，显示的内容也不会改变。我制作了一些示例代码，以及一个JSFiddle。

<div id="app">
  <button v-if="unlocked">
    Unlocked
  </button>
  <button v-else-if="a >= b">
    Available
  </button>
  <button v-else>
    Unavailable
  </button>
  <span>{{a}}</span></div>

和JS：

var x = {
    unlocked: false,
  a: 0,
  b: 10,}new Vue({
  el: "#app",
  data: {
    unlocked: x.unlocked,
    a: x.a,
    b: x.b
  },});function y() {
    x.a++;
  console.log(x.a);}var z = setInterval(y, 250);

https://jsfiddle.net/ny5phzqe/

它会增加变量，但文本和显示的按钮都不会更改。我是否从根本上误解了Vue的某些内容？

Answer 1

当你申报时a: x.a您正在分配初始值。如果要更新该值，则需要对Vue对象内部的变量进行更改。最佳实践，在组件内部使用方法：var myVue = new Vue({   el: "#app",   data: {     unlocked: false,     a: 0,     b: 10   },   methods: {      increment() {         this.a++         console.log(this.a)      }   }});myVue.increment()console.log(myVue.a)