Vue Bootstrap 4 Datalist

Custom datalist with the reactivity of vue

vbdatalist

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

Name Type Default Description
v-model String / Number null The value of the datalist
options Array [] Item list for the datalist
id String Generated The id of the datalist
required Boolean false Whether the datalist is required
disabled Boolean false Whether the datalist is disabled
placeholder String null The placeholder of the datalist
value String value The value is the property of the option object.
text String text Is the label is the property name of the option object.

GitHub

View Github