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

Question

我在需要的选择选项上使用 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 满足此要求。

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

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