Why doesn't the data get updated in Vue Dev Tools?

8
votes

I want someone to explain why this would not work in Vue.

HTML

<div id="app">
  <button v-on:click="isActive = !isActive">Click me</button>
</div>

JS

vueApp = new Vue({
  el: '#app',
data: {
        isActive: false
      }
});

Expected click behaviour: Vue Dev Tools - data: isActive equals true

Actual click behaviour: data: Vue Dev Tools - isActive equals false

But this does

HTML

<div id="app">
  <button v-on:click="isActive = !isActive">Click me</button>
  <p v-bind:class="{ active : isActive }">Some text</p>
</div>

JS

vueApp = new Vue({
  el: '#app',
data: {
        isActive: false
      }
});

Expected click behaviour: Vue Dev Tools - data: isActive equals true, and p has active class.

Actual click behaviour: Vue Dev Tools - data: isActive equals true, and p has active class.

My gripe is, I expected Vue to be able to manipulate the data directly, not via another element on the page.

2
vue.jsvuejs2
Probably because active is a separate (and undefined) data property to isActive? If you want to toggle isActive, your first example should be @click="isActive = !isActive" – Phil
Seeing as you've done exactly that in your second example, I really don't understand what you're asking – Phil
Thanks Phil, that was a typo on the first example. Ive fixed it now. My question is why does it not work in the first example. I thought vue could manipulate the data directly. But it only works in the second example because I'm using isActive on the page to bind a class. – Clinton Green
How are you verifying it? – Phil
You need to hit the "Refresh" button in Vue dev tools to see changes to data properties. See github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083 – Phil

2 Answers

15
votes

As posted by @Phil in the comments, there is an issue for this, https://github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083.

It seems that without anything to react to on the page, the data will not get updated in Vue Dev Tools. However you can see the change if you refresh via Vue Dev Tools so it must be working.

We just can't see the change in real time on Vue Dev Tools.

0
votes

It works fine, look: 

new Vue({
  el: '#app',
  data: {
    isActive: false
  }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button v-on:click="isActive = !isActive">{{ isActive }}</button>
</div>