javascript - VueJS：为什么这个数据属性没有在开发工具中的点击事件上更新？

Question

在下面的代码中，getWidth事件处理程序（在methods对象中定义）更新data.width属性。随着它的更新，该变量width应该在 VueJS 的 Chrome 插件中实时显示。

但是，该实时更新并未显示在 Vue DevTools 中。我不确定代码是否有问题或者我做错了什么。插件不是问题，因为我也在 Firefox 中进行了测试。

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;
    }
  }
})

Answer 1

发生这种情况是因为您实际上并未在mywidth任何地方使用您的数据属性。

Vue DevTools仅在代码中访问它们时更新其对 Vue 组件数据属性的引用，而不是在设置它们时。

只需在某处使用该数据属性（例如放入{{ mywidth }}模板），它将在 Vue DevTools 扩展中更新。