CODEWITHSUNDEEP
vue.js
Stanislau Karaliou
Stanislau Karaliou

Reputation: 187

Vue js multiselect hide triangle with empty

I'm using the vue-multiselect library. How can I hide this triangle if the data is empty?

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>

Upvotes: 3

Views: 1729

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

You can replace the default dropdown button by providing the caret slot; in your situation you can use an empty <span>, try something like this:

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

Upvotes: 5

Related Questions