9

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.

9
  • 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
    May 8, 2017 at 1:16
  • Seeing as you've done exactly that in your second example, I really don't understand what you're asking
    – Phil
    May 8, 2017 at 1:18
  • 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. May 8, 2017 at 1:22
  • How are you verifying it?
    – Phil
    May 8, 2017 at 1:23
  • 2
    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
    May 8, 2017 at 1:41

3 Answers 3

15

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.

2

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?

0

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>

3
  • Hi, yes it works great that way. My issue is without having {{ isActive }} on the page data:{ isActive: false } will not change to true. If you look in the comments @Phil has posted a github issue which explains it. May 8, 2017 at 22:46
  • 1
    @ClintonGreen oh, it's a devtools issue, not the code issue, I see. May 9, 2017 at 6:29
  • Yup I thought it was a code issue too, at first. I've updated the question to include vue dev tools. Cheers May 10, 2017 at 0:22

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.