javascript - 我应该如何正确使用同步修饰符和 vuetify 输入自定义事件 `@update:error` ？

Question

我正在使用 Vuetify，更具体地说是 v-text-field component .

此组件有一个可同步的自定义事件@update:error。我想用它来更新模板数据对象中的 bool 字段，并使用该字段来更新附加图标。

我已阅读the documentation并假设它应该在下面的代码中工作，但事实并非如此；我不知道我错过了什么。这是一个最小的例子:

<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

如何让我的数据字段随同步事件进行更新？如果此事件因某种原因被破坏，您是否可以建议我解决方法？

Answer 1

它有点坏了。我不太确定设计意图是什么，但现在感觉很奇怪。

该 Prop 的文档明确指出 error: Puts the input in a manual error state 。

让我们看看 implementation

1. 透明组件should always report as invalid当此属性设置为 true 时。好的
2. update:error值为 true 的事件当某些 rules 时发送坏了。根本没有意义。如果 prop 旨在让用户手动设置错误状态，为什么要触发 update作为验证结果的事件？
3. 如果您解决了字段问题，update:error值(value)false未发送，因为它被 error 阻止具有值的 Prop true 。什么鬼？

所以使用error.sync绝对没有意义。这充其量只是文档中的错误。如果你问我的话，设计很糟糕。应该有一些其他事件，具有不同的名称，专门用于传达字段的验证状态...

如何绕过它 - 采取 1

一种方法是不通过 error完全支持字段并仅使用事件:

<v-text-field @update:error="errors.firstname = $event">

可以工作，但仍然存在一个问题。有一个open issue 。当呈现该字段时，它也会经过验证，但不会显示错误，也不会 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'
    }
  }