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

user_8069961 0
Viewed 1971

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;
    }
  }
})
vue-devtools vuejs2 javascript
1 Answers

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.

user_26784540
Related