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组件的数据属性时更新其对Vue组件的数据属性的引用，而不是在它们被设置时更新。

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

VueJS：为什么这个数据属性没有在Dev Tools中点击事件更新？

1 个答案: