需要下拉项目

Question

您好，我有一个下拉菜单。

我需要确保选择了一个选项，因此我想对必填字段进行客户端验证。

   <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，但它不起作用。我已尝试搜索所需的标签，并已尝试在 b 下拉列表中选择 aria-required='Please choose an option'，但是，它再次不起作用。

Answer 1

您可以执行以下操作 - 在您的 data return 中设置您的 v-model 等于 null。

尝试使用computed 并检查是否选择了这样的内容：

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