我正在使用Vuetify，更具体地说是v-text-field组件。
此组件具有可同步的自定义事件@update:error。我想使用它来更新模板数据对象中的布尔字段，并使用此字段更新附加的图标。
我已经阅读了文档并假设它应该在下面的代码中工作，但它没有;我不知道我错过了什么。下面是一个最小示例：
<div id="app">
<v-app>
<v-row>
<v-col xs="8" col="8" xl="6" offset-xl="3">
<v-form>
<v-text-field v-model.trim="newUser.firstname"
:rules="nameRules"
label="Firstname"
:append-icon="errors.firstname ? 'mdi-alert-circle-outline' : 'mdi-check'"
:error.sync="errors.firstname">
</v-text-field>
</v-form>
</v-col>
</v-row>
</v-app>
</div>
错误事件不会持续更新我的errors.firstname字段，因此不会更新附加的图标。
用这支笔检查它：https://codepen.io/billybobbonnet/pen/RwNRmqd?editors=1011
如何让我的数据字段使用同步事件进行更新？如果此事件以某种方式被破坏，您是否会建议我解决方法？
它有点坏了。我不太确定设计的目的是什么，但现在感觉真的很奇怪。
道具的文档清楚地说明了error: Puts the input in a manual error state.
让我们看一下实现
- 很明显，当此 prop 设置为
true时，组件应始终报告为无效。还行 - 当某些
rules被破坏时，将发送值为trueupdate:error的事件。完全没有意义。如果 prop 旨在让用户手动设置错误状态，为什么要触发update事件作为验证的结果？ - 如果您修复了字段问题，则不会发送具有值
falseupdate:error，因为它被值为true的 prop 阻止error。
所以使用error.sync绝对没有意义。这充其量是文档中的错误。如果你问我，设计不好。应该有一些其他事件，具有不同的名称专用于传达字段的验证状态...
如何绕过它 - 采取 1
一种方法是根本不将error道具传递到字段，而只使用该事件：
<v-text-field @update:error="errors.firstname = $event">
有效，但仍然存在一个问题。有一个悬而未决的问题。呈现字段时，也会对其进行验证，但不显示错误，也不会发送update:error。当您聚焦字段并将其保留为不进行更改时，将显示错误，但不会发送事件，因为错误状态实际上没有更改(字段在获得焦点之前处于错误状态(。解决方法是，如果您的errors.firstname: true，则设置初始值(因为初始值无效(。在这个简单的例子中工作，但我不会那样做 - 它只是在现实世界的场景中无法缩放(例如，字段具有非空的初始值(
如何绕过它 - 采取 2
最好的方法是去 Vuetify Github 并要求一个功能 - 将 VInput 插槽转换为作用域插槽并允许访问其中的验证状态。然后，您可以将默认图标替换为从插槽生成的图标。
在此之前，唯一的选择是使用refs
<v-text-field v-model.trim="newUser.firstname"
:rules="nameRules"
label="Firstname"
:append-icon="firstnameIcon()"
ref="firstname">
</v-text-field>
methods: {
firstnameIcon() {
return this.$refs.firstname && this.$refs.firstname.valid ? 'mdi-check' : 'mdi-alert-circle-outline'
}
}