需要下拉项目

Posted 2023-05-09

【中文标题】需要下拉项目

【英文标题】：Dropdown down item required

【发布时间】：2021-12-24 17:45:35

【问题描述】：

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

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

   <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'，但是，它再次不起作用。

【参考方案1】：

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

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

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

【讨论】：

我仍然需要一个默认文本“选择数据类型”。那是行不通的。

也许将data return 中的v-model 设置为Choose data type 并在validData 中返回false，如果它等于null 或Choose your data type？