为什么我的 Vue/Nuxt Select 字段状态默认有效？答案

【问题标题】：Why are my Vue/Nuxt Select field states valid by default?为什么我的 Vue/Nuxt Select 字段状态默认有效？
【发布时间】：2020-02-25 03:31:09
【问题描述】：

我在 Nuxt.js 中有各种 HTML 选择元素。我也在使用 Vuelidate 进行验证，这按预期工作。这是我表单中的典型选择框：

    <select
      id="location"
      name="location"
      v-model="form.location"
      @blur="$v.form.location.$touch()"
      :class="{error: appendErrorClass($v.form.location)}"
    >
      <option :value="null" hidden>Choose...</option>
      <option 
        v-for="(item, index) in $store.state.quotes.data.practiceStates"
        :key="index"
        :value="item.data">
          {{item.display}}
      </option>
    </select>

在选择任何选项之前，我注意到所有选择字段上的以下内容。

我尝试在测试选择字段上删除任何 Vue 魔法，看看是否会发生相同的结果。

      <select id="location1" name="location1">
        <option value="" hidden>Choose...</option>
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
      </select>

仍然看到valid: true。有什么我忽略的东西会导致有效性默认为真吗？在此先感谢您提供有关此问题的任何帮助或指导。

更新澄清： Vuelidate 验证工作得很好。我正在处理的问题是选择字段属性Validity.validate。我只提到 Vuelidate 是为了提供完整的上下文。

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

HTML Select 是一种“奇怪”的表单元素，其有效性通常是检查是否有可读值。因为一个选择总是有选择的东西，它验证......

这不同于电话输入需要特定的有效模式。

我没有专门使用 Vuelidate，但我读过文档说，如果你离开 v-model="form.location"，它很可能只是验证一个值存在，所以 任何选择的项目 都符合条件.

【讨论】：

感谢您的回复，但是我在 Vue 环境之外的选择字段的有效性默认为 false。上面关于 vuelidate 的信息可能具有误导性。主要目标是设置select:valid css 伪选择器时选项的颜色。很抱歉造成混乱。
嗯，它使用 HTML 的有效性测试而不是 Vue 中的任何东西。只要选项有value=""，它就应该测试为真
我也这么认为。我找到了解决我的问题的方法。它没有回答我发布的原始问题，但它至少让我达到了我希望达到的最终结果。我会尽快发布我的答案。再次感谢您抽出宝贵时间帮助我解决此问题。
是的，我很想知道你降落在哪里。验证选择是一个常见问题

【解决方案2】：

在我的原帖中，我引用了基于 vuelidate 库的动态样式：:class="{error: appendErrorClass($v.form.location)}"

@PierreSaid 回复了这篇文章，后来删除了他/她的回复。事实证明，他的回答有助于向我指出一些 Vuelidate 属性，这些属性能够帮助解决我的问题。谢谢你，PierreSaid。

我已经将该动态类更新为如下所示的 mixin：

export default {
  methods: {
    appendErrorAndValidityClass(field) {
      return {
        error: field.$error,
        invalid: field.$invalid,
      };
    }
  }
};

将 mixin 导入到 Vue 部分后，我的选择框是这样的：

<select
  id="location"
  name="location"
  v-model="form.location"
  @blur="$v.form.location.$touch()"
  :class="appendErrorAndValidityClass($v.form.location)"
>

在未更新SELECT字段时，请附加一类invalid。它还会相应地更新错误样式。现在，我可以为选择字段具有无效类时分配样式。这解决了我的整体问题。感谢 PierreSaid 和 Bryce 的帮助。

【讨论】：