В массиве проверок 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.