Vue 材料组件 md-select 所需的属性不起作用

Question

我正在使用 https://vuematerial.io/components/select 作为管理仪表板并使用html验证。除了md-select HTML 验证都在工作。对于md-select即使我们添加required属性并填充数据，它仍然要求填充数据。

<md-field>
   <label>User type</label>
   <md-select v-model="userType" name="userType" id="userType" required>
      <md-option v-if="$loggedInUserType == 'admin'" value="admin">admin</md-option>
      <md-option  v-if="$loggedInUserType == 'admin'" value="company">company</md-option>
      <md-option  v-if="$loggedInUserType == 'company'" value="staff">staff</md-option>
   </md-select>
</md-field>

Answer 1

看起来 Vue Material 正在将readonly="readonly"属性添加到组件后面的 <select> 元素中。当存在readonly属性时，将忽略required属性。看这里

我的解决方案是在md-select后面创建一个opacity: 0输入，该输入与同一v-model相关联并设置为required