Vue 및 부트스트랩을 사용한 데이터리스트

라이브 데모

사용 예

기본 사용법

<template>
  <VBDatalist :options="options" value="id" text="name" />
</template>

맞춤 슬롯 사용

<form-select :options="options" v-model="selected">
    <template v-slot:default="props">
         MORE TEXT {{ props.option.text }}
    </template>
</form-select>

import "bootstrap/dist/css/bootstrap.css";
import VBDatalist from "vue-bootstrap-datalist";
import "vue-bootstrap-datalist/lib/index.css";

export default {
  components: {
    VBDatalist,
  },
  setup() {
    const options = [
      {
        id: 1,
        name: "Nicaragua",
      },
      {
        id: 2,
        name: "Costa Rica",
      },
      {
        id: 3,
        name: "Panama",
      },
    ];
    return { options };
  },
};
</script>