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

Posted 2023-04-13

【中文标题】VueJS：为啥这个数据属性没有在开发工具中的点击事件上更新？

【英文标题】：VueJS: Why this data property doesn't updated on click event in Dev Tools?VueJS：为什么这个数据属性没有在开发工具中的点击事件上更新？

【发布时间】：2018-03-18 07:19:13

【问题描述】：

在下面的代码中，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;
    
  
)

【问题讨论】：

大部分 JS 函数调用需要 () 来执行函数。我也是 Vue 的新手，所以不确定是否需要。但是在你有 v-on:click="getWidth" 的地方，如果你在 getWidth 的末尾添加 () 会发生什么。所以 v-on:click="getWidth()"

@DylanWright () 不需要执行该方法。但是，如果您有一个想要传递给方法的变量，那么您可以使用 () 将其传递为 (width)。

mywidth 与width 有什么关系？

@user2486 他们不相关。

好吧，你在

【参考方案1】：

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

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

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

【讨论】：

@appu 这是假设您在说“变量 width 应该在 VueJS 的 Chrome 插件中实时显示”并且您的意思是 mywidth 时输入错误。您的组件没有定义 width 属性。