vue-bootstrap-datalist v0.0.9

Vue Bootstrap 4 Datalist

Custom datalist with the reactivity of vue

Live Demo

Installation

npm install --save vue-bootstrap-datalist

Requirements

• Bootstrap ^4 (only css)
• jQuery >=1.8.3

Usage Example

<template>
  <VBDatalist
    :options="options"
    v-model="selected"
    placeholder="Select an option"
    value="id"
    text="name"
  />
</template>

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

import { ref } from "vue";

export default {
  components: {
    VBDatalist,
  },
  setup() {
    const selected = ref("");

    const options = [
      {
        id: 1,
        name: "Nicaragua",
      },
      {
        id: 2,
        name: "Costa Rica",
      },
      {
        id: 3,
        name: "Panama",
      },
    ];
    return { options, selected };
  },
};
</script>

Props