javascript - Vue.js does not seem to be updating the DOM on a variable change - Stack Overflow

admin管理员组

文章数量:1417411

I am fairly certain this is an extremely simple problem, but I have spent around 3 hours attempting to figure it out to no avail. If I bind a variable inside of a Vue object, i.e. data: {x: a} where a is some variable, and then I change the value of a, I was under the impression that it would change the value of data.x as well, no?

I'm currently attempting a v-if/v-else chain, with the if statement involving an inequality, but even after it should evaluate to true, what is displayed does not change. I made some sample code, and a JSFiddle to go with it.

<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>

And the 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);

/

It increments the variable, but neither the text nor the displayed button change. Have I fundamentally misunderstood something about Vue?

I am fairly certain this is an extremely simple problem, but I have spent around 3 hours attempting to figure it out to no avail. If I bind a variable inside of a Vue object, i.e. data: {x: a} where a is some variable, and then I change the value of a, I was under the impression that it would change the value of data.x as well, no?

I'm currently attempting a v-if/v-else chain, with the if statement involving an inequality, but even after it should evaluate to true, what is displayed does not change. I made some sample code, and a JSFiddle to go with it.

<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>

And the 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/ny5phzqe/

It increments the variable, but neither the text nor the displayed button change. Have I fundamentally misunderstood something about Vue?

• javascript
• html
• vue.js

Share Improve this question Follow asked May 16, 2019 at 23:59 MakairesMakaires 10711 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

If I bind a variable inside of a Vue object, i.e. data: {x: a} where a is some variable, and then I change the value of a, I was under the impression that it would change the value of data.x as well, no?

This misunderstanding is the reason for the trouble, and it is not related to Vue but to how Javascript and object references work. To put it concisely: your statement is only true if a is an object. In your example it is not, it's a primitive Number type.

Why does it matter? Because in Javascript, when a variable holds an object, it really only contains a reference to the object. But when a variable holds a primitive type, it contains the actual value. This means multiple variables may hold references to the same object.

If a had been an object, then-- due to the nature of Javascript object references-- setting {x: a} would mean that x and a each store a reference to the same object. You can think of this object as not belonging to either x or a, which are storing references to it. If you were to then make changes to properties on this object, from either x or a, it would be reflected in both places.

But since a is a Number, then-- due to the nature of Javascript primitives-- setting {x: a} means that x receives a copy of a's value as it is in that moment. No references, no connection. They both immediately contain pletely separate primitive values.

The answer is yes and no. Vue will watch data.a, and update it directly but you are changing x.a and expecting data.a to update. That won't work.

Your flow of your code is roughly this:

1. Create object X
2. Create Vue instance
3. Initiate Vue with data property a with value x.a (0)
4. Define a function that increments x.a
5. Call the increment function (that manuplates x)

There is no "connection" or reactivity between data.a and x. Vue will update the view/template according to how data.a changes but you are never changing that value. You are changing x.a

Here's a working example of how to change data.a

new Vue({
      el: "#app",
      data: {
        unlocked: false,
        a: 0,
        b: 10
      },
      methods: {
        increment() {    
            this.a++;
            console.log(x.a);
        }    
      },
      mounted() {
        setInterval(this.increment, 1000)
        }
    });

Check out this fiddle https://jsfiddle/m46sa3og/1/

When you declare

a: x.a

You are assigning a initial value.

If you want to update the value, you need to do the change on the variable inside on the Vue Object. A best practice, with a method inside the ponent:

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)

本文标签： javascriptVuejs does not seem to be updating the DOM on a variable changeStack Overflow