Dropdown down item required

Viewed 211

Hello I have a dropdown.

I need to make sure an option is selected, thus I want to make a client validation for required field.

   <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>

This is because I do not want to send incorrect request to the server. I have used Vuelidate and it does not work. I have tried searching for a required tag and I have tried aria-required='Please choose an option' on the b-dropdown, however, again it does not work.

1 Answers

You can do following - set your v-model in your data return equal null.

Than try to use computed and check if something is selected like this:

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