如何在 vue-multiselect 组件上调用客户端验证？答案

【问题标题】：How to invoke client side validation on vue-multiselect component?如何在 vue-multiselect 组件上调用客户端验证？
【发布时间】：2020-07-10 16:52:48
【问题描述】：

我像这样使用vue-multiselect library：

在src/components/FeedbackForm.vue

<div>
<CustomerSelect :required="true" />
</div

问题：我怎样才能使这个选择组件在客户端是必需的？我想我可以像这样简单地添加一个 HTML5 属性：

在src/components/CustomerSelect.vue

模板部分：

<multiselect
  id="customer_last_name_input"
  v-model="c_lastname_value"
  :options="getActiveUserProfiles"
  label="lastname"
  track-by="uid"
  :close-on-select="true"
  @select="onSelect"
  @remove="onRemove"
  required <----------can't do this?
>

脚本部分：

props: ['required']

执行上述代码不会像常规 HTML 选择元素那样在浏览器中调用客户端验证。感谢您的帮助。

【问题讨论】：

标签： vue.js vue-multiselect

【解决方案1】：

对于docs，它接受allowEmptybool 属性。

allowEmpty ||布尔值 ||允许删除所有选定的值。否则必须选择一个。

原来如此

<multiselect
  id="customer_last_name_input"
  v-model="c_lastname_value"
  :options="getActiveUserProfiles"
  label="lastname"
  track-by="uid"
  :close-on-select="true"
  @select="onSelect"
  @remove="onRemove"
  :allow-empty="required"  <----------do this?
>

【讨论】：