Vue.js中.sync修饰符报错：无法读取undefined的value属性

这个报错的原因很明确：Vuetify的VTextField组件的@input事件触发时，传递的参数不是原生DOM事件对象，而是输入框的当前值本身。你代码里试图访问$event.target.value，但此时$event已经是输入的文本值了，根本没有target属性，所以才会抛出Cannot read property 'value' of undefined的错误。

修复方法 #

直接把子组件中@input的处理逻辑改成传递$event即可，不需要再提取target.value：

<div>
  <label>Label</label>
  <VTextField 
    :value="addOnLabel" 
    @input="$emit('update:addOnLabel', $event)" 
    solo outline reverse type="text" 
  />
</div>

补充说明 #

Vuetify的大部分表单组件（比如VTextField、VSelect、VCheckbox等）都做了封装，@input事件会直接返回组件的当前值，而不是原生事件。这样的设计是为了让开发者更便捷地获取用户输入，省去手动从事件对象中提取值的步骤。

如果你的场景确实需要获取原生DOM事件，可以使用@input.native来监听原生输入事件，但在这个.sync修饰符绑定属性的场景下，完全没必要这么做——直接传递$event（也就是输入值）就可以实现双向绑定的需求。

内容的提问来源于stack exchange，提问作者Nika Kurashvili