Nuxt + vue-multiselect で選択後のチップを一定文字数で省略する例

要点

検索

• 検索ロジックは @search-change を使って自前で指定する ( 選択後の要素文字列を省略してしまうと、そのままでは全文を検索できないため )
• internal-search は無効にしておく

文字の省略

• custom-label 関数を使って、文字省略の制御をする

表示例

公式

コードの例

<script lang="ts" setup>
import VueMultiselect from 'vue-multiselect'

const selected = ref([])

const optionsData = [{ name: 'XXXXYYYY' }, { name: 'ZZZZZZZZZZZZZZZZZZZ' }]
const options = computed(() => optionsData.filter((option) => option.name.includes(searchQuery.value)))

function customLabel(selectedOption: any): string {
  return selectedOption.name.length > 5 ? selectedOption.name.slice(0, 5) + '...' : selectedOption.name
}

const searchQuery = ref('')

function customSearch(search: any) {
  searchQuery.value = search
}
</script>

<template>
  <div>
    <VueMultiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      track-by="name"
      :custom-label="customLabel"
      :internal-search="false"
      @search-change="customSearch"
    >
      <template #option="props">
        <div>
           {{ props.option.name }}
        </div>
      </template>
    </VueMultiselect>
  </div>
</template>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

プロフィール・経歴