vue.js - Vuelidate 检查数组有模糊的项目

Question

我正在使用nuxt-vue-select来允许用户从一个数组中选择多个对象locations，然后我想使用Vuelidate来尝试验证数组中的至少一个项目已被选择/设置为模糊但是我无法vuelidate做到做这个。我在这里做错了什么？

模板

<b-form-group label="Locations" label-for="locations">
    <client-only>
        <v-select
          v-model="userCopy.locations"
          name="locations"
          filterable
          multiple
          placeholder="Select locations"
          label="label"
          :options="locations"
          :class="{ 'is-invalid': v.form.locations.$error }"
          @blur="v.form.locations.$each[index].$touch()"
        />
    </client-only>
</b-form-group>

脚本

data() {
    return {
        form:{
            locations: []
        }
    }
},

validations() {
    return {
      form: {
        locations: {
          $each: {
            required
          }
        }
      }
    }
  }

数组数据

  { label: 'Avon' },
  { label: 'Bedfordshire' },
  { label: 'Berkshire' },
  { label: 'City of Brighton and Hove' },
  { label: 'City of Bristol' },

Answer 1

对于 vuelidate，您必须使用与 $data 相同的文件名，因此您需要首先将form验证对象的名称替换为userCopy，并将 minLength 应用于您的位置长度：

validations() {
    return {
      userCopy: { // change this
        locations: {
          // ... to try and validate that at least one item in the array
          // use minLength to do that
          minLength: minLength(1)
          $each: {
            required
          }
        }
      }
    }
  }

要处理数组结构，我建议尝试form-validation.js.