CODEWITHSUNDEEP
vue.jsvuejs2
Clinton Green
Clinton Green

Reputation: 9977

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

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.

Upvotes: 9

Views: 10068

Answers (3)

alds
alds

Reputation: 555

I had a similar problem yesterday using the latest Dev Tools version (6.5.0). Refreshing the page and clicking the Force Refresh button in Dev Tools (as suggested above) didn't work; Dev Tools still showed Data before the page refresh instead of Data from the page load.

What worked for me is right-clicking Dev Tools and selecting Reload Frame

enter image description here

As an aside, Dev Tools is reflecting the Data correctly today. Nothing has changed in my code, but perhaps restarting my browser today fixed the issue?

Upvotes: 3

Clinton Green
Clinton Green

Reputation: 9977

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.

Upvotes: 15

Egor Stambakio
Egor Stambakio

Reputation: 18156

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>

Upvotes: 0

Related Questions