VueJS: Why this data property doesn't updated on click event in Dev Tools?

Question

In the code below, the getWidth event handler (defined in the methods object) updates the data.width property. As it updates, the variable width should be shown live in VueJS's Chrome addon.

However, that live update doesn't show up in the Vue DevTools. I'm not sure if there is something wrong with the code or what am I doing wrong. The add-on isn't a problem since I've tested in Firefox too.

HTML

<div id="app">
  <p :style="{width: 200 + 'px'}" class="box">{{msg}}</p>
  <button v-on:click="getWidth">New Width</button>
</div>

JS

new Vue({
  el: '#app',
  data: {
    msg: 'Test Message',
    mywidth: ''
  },
  methods: { 
    getWidth: function(){
      this.mywidth = 20 * 2;
    }
  }
})

Most JS Function calls need () to execute the function. I'm new to Vue as well so not sure if it's needed. But where you have v-on:click="getWidth", what happens if you add the () at the end of getWidth. So v-on:click="getWidth()" — Dylan Wright
– Dylan Wright, Commented Oct 6, 2017 at 13:12
@DylanWright () isn't required to execute the method. However if you there's a variable you'd want to pass to the method then you'd pass that using () something as (width). — appu
– appu, Commented Oct 6, 2017 at 13:16
Well, you are using width in <p> and it appears nowhere else in the supplied code. — Richard Matsen
– Richard Matsen, Commented Oct 6, 2017 at 13:22

thanksd · Accepted Answer · 2017-10-06 13:34:06Z

3

This is happening because you aren't actually using your mywidth data property anywhere.

The Vue DevTools only updates its references to the Vue component's data properties when they are accessed in code, not when they are set.

Simply use that data property somewhere (like putting {{ mywidth }} in the template) and it'll be updated in the Vue DevTools extension.

edited Oct 6, 2017 at 13:34

answered Oct 6, 2017 at 13:24

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thanksd Over a year ago

@appu This is assuming you mistyped when you say "the variable width should be shown live in VueJS's Chrome addon" and that you meant mywidth. Your component doesn't have a width property defined.

Collectives™ on Stack Overflow

VueJS: Why this data property doesn't updated on click event in Dev Tools?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related