whosphp/vue-bootstrap-select-wrapper

vue-bootstrap-select-wrapper

使用 vue 对 bootstrap-select 的简单包装

安装

依赖 jQuery, bootstrap 和 bootstrap-select

$ npm install vue-bootstrap-select-wrapper -S

或者

$ yarn add vue-bootstrap-select-wrapper

使用

在 main.js 文件中引入插件并注册

# main.js
// 先引入 jquery bootstrap 和 bootstrap-select
window.$ = window.jQuery = require('jquery')
require('bootstrap')
require('bootstrap-select')

// 然后引入组件
import BootstrapSelect from 'vue-bootstrap-select-wrapper'
Vue.use(BootstrapSelect)

在项目中使用 vue-bootstrap-select-wrapper

<template>
  Single Select:
  <bootstrap-select :options="options" v-model="value"></bootstrap-select>
  
  Multi Select:
  <bootstrap-select :options="options" v-model="value1" multiple></bootstrap-select>
  
  绑定二维数组时指定 label 和 key
  <bootstrap-select track-by="id" label="name" :options="options3" v-model="value3"></bootstrap-select>
</template>
<script>
  export default {
    data () {
      return {
          options: [
            1, 2, 3
          ],
          options3: [
            {
                id : 1,
                name : 'test1',
            },
            {
                id : 2,
                name : 'test2',
            }
          ],
          value: null,
          value1: [],
          value3: null,
        }
    }
  }
</script>