在带有数组的 v-model 上使用 Vuelidate

Question

我在 select 选项上使用 vuelidate (https://vuelidate.js.org/) 来要求，当 v-model 有一个名字时它工作 $v.selectedWorkflow.$model

<div class="form-group" :class="{ 'form-group--error': $v.selectedWorkflow.$error }">
          <select v-model.trim="$v.selectedWorkflow.$model">
            <option :value="undefined" selected disabled>Select a Workflow</option>
            <option v-for="workflow in workflows"
                :key="workflow.id" :value="workflow">
              {{workflow.name}}
            </option>
          </select>
          </div>

然而，当用数组做 v-model 时，我得到一个错误 $error is undefined 或有时 $model is undefined 当使用 $v.usersForRole[role.name].$model 我不确定我做的是否正确语法

<div class="form-group" :class="{ 'form-group--error': $v.usersForRole[role.name].$error }">
            <select v-model.trim="$v.usersForRole[role.name].$model">
              <option :value="undefined" selected disabled>Select a User</option>
              <option v-for="user in role.users" :key="user.id" :value="user.id">
                {{user.display_name}}
              </option>
            </select>
          </div>
          <div class="error" v-if="!$v.usersForRole[role.name].required"></div>

这是我的验证

validations: {
    title: {
      required,
      minLength: minLength(4)
    },
    slug: {
      required
    },
    selectedWorkflow: {
      required
    },
    usersForRole: {
      required
    }
  },

Answer 1

为此要求使用 $each。

参考 link：https://vuelidate.js.org/#sub-collections-validation

validations: {
    title: {
      required,
      minLength: minLength(4)
    },
    slug: {
      required
    },
    selectedWorkflow: {
      required
    },
    usersForRole: {
      $each: {
         required
      }
    }
  },

在带有数组的 v-model 上使用 Vuelidate

Use Vuelidate on a v-model with array

vue.js

nuxt.js

vuelidate