Vue JS MultiSelect隐藏带空的三角形

时间:2018-09-05 12:48:35

标签: vue.js

我正在使用vue-multiselect库。如果数据为空,如何隐藏该三角形?

Screenshot

<multiselect v-model="user.majors" id="majorsSearch" label="name" track-by="id" placeholder="Search majors..." select-label="Select" :options="majorsBag" :multiple="true" :loading="isLoadingMajors" :internal-search="false" :clear-on-select="true" :close-on-select="true" @search-change="asyncFindMajors">
    <template slot="tag" scope="props"></template>
</multiselect>

1 个答案:

答案 0 :(得分:1)

您可以通过提供caret插槽来替换默认的下拉按钮;在您遇到的情况下,您可以使用空的<span>,尝试执行以下操作:

<multiselect v-model="user.majors">
  <span slot="caret" v-if="!user.majors.length"></span>
</multiselect>