Closed2

primeVUE:MultiSelectで選択数の上限指定と課題

したいこと

  • primeVUEで複数選択できるチェックボックスを作りたい
  • 選択数に上限を設けたい(2つまで)

主に使ったもの・環境

  • Vue3
  • primeVUE

primeVUE: MultiSelect

したこと

見た目

コード(コンポーネント)

  • MultiSelectコンポーネントをラップ
  • setterに条件をつける
<template>
  <div>
    <MultiSelect
      id="getStage"
      v-model="computedStage"
      display="chip"
      :options="stageInfos"
      optionLabel="name"
      scrollHeight="250px"
      placeholder="Select stages"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from '@vue/runtime-core'
import { StageInfos } from '../../../assets/stageInfo'

export default defineComponent({
  name: 'SplaMultiSelect',
  props: {
    stageNames: {
      type: Array as PropType<string[]>,
      default: '',
    },
    stageInfos: {
      type: Array as PropType<StageInfos>,
      default: '',
    },
  } as const,
  setup(props, { emit }) {
    const computedStage = computed({
      get: () => props.stageNames,
      set: (value) => {
        // 選択できるのは2ステージ以下
        if (props.stageNames.length < 3 && value.length < 3) emit('update:stageName', value)
      },
    })

    return {
      computedStage,
    }
  },
})
</script>

課題

全て選択できるチェックボックスが邪魔だけど外せない:pien:

これ

cssを上書きして解決したのでClose

このスクラップは2021/05/30にクローズされました
ログインするとコメントできます