Блог

Здравствуйте, у меня есть выпадающий список.

Мне нужно убедиться, что выбрана опция, поэтому я хочу выполнить проверку клиента для требуемого поля.

    <b-dropdown id="clientData"
                      name="clientData"
                      v-model="$v.clientData.selectedOption.$model"
                      :text="clientData.selectedOption"
                      class="m-2 col-2" no-flip>
          <b-dropdown-item v-for="option in clientData.options"
                            :key="option.value"
                            :value="option.value"
                            @click="clientData.selectedOption = option.value">
            {{option.text}}
          </b-dropdown-item>
        </b-dropdown>
    
<script>
import { required } from 'vuelidate/lib/validators'
    const selectedOptionCheck = (selectedOption) => selectedOption !== 'Choose data type'
    
     data () {
        return {
          clientData: {
            csvFile: null,
            selectedOption: 'Choose data type',
            options: [
              {
                value: 'PhoneNumber',
                text: 'Phone Number'
              },
              {
                value: 'Email',
                text: 'Email'
              },
              {
                value: 'DeviceToken',
                text: 'Device Token'
              }
            ]
          }
        }
      },
      validations: {
        clientData: {
          selectedOption: {
            required,
            selectedOptionCheck
          }
        }
      },
</script>
 

Это потому, что я не хочу отправлять неверный запрос на сервер.
Я использовал Vuelidate, и это не работает. Я попытался найти необходимый тег и попробовал aria-required= «Пожалуйста, выберите опцию» в раскрывающемся списке b, однако, опять же, это не работает.

Вы можете сделать следующее — установите свой v-model в своем data return равном null .

Чем пытаться использовать computed и проверять, выбрано ли что-то подобное:

 computed: {
  validData: function () {
      return this.yourvmodelname
   },
}