bootstrap select 在vue 双向绑定
时间: 2024-01-21 12:12:15 浏览: 24
在 Vue 中,可以使用自定义指令来实现 Bootstrap Select 的双向绑定。以下是一个简单的例子:
首先,安装 Bootstrap Select 和 Vue.js:
```bash
npm install bootstrap-select vue
```
接着,在 Vue 组件中引入 Bootstrap Select 的 CSS 和 JS:
```html
<template>
<div>
<select v-select2="selected" :options="options"></select>
</div>
</template>
<script>
import 'bootstrap-select/dist/css/bootstrap-select.min.css';
import 'bootstrap-select/dist/js/bootstrap-select.min.js';
export default {
data() {
return {
selected: null,
options: ['Option 1', 'Option 2', 'Option 3'],
};
},
};
</script>
```
然后,在 Vue 中定义 `v-select2` 指令:
```js
import Vue from 'vue';
import $ from 'jquery';
import 'bootstrap-select';
Vue.directive('select2', {
inserted: function(el, binding, vnode) {
$(el).selectpicker().on("change", function(e) {
vnode.context[binding.expression] = $(e.target).val();
});
},
update: function(el, binding, vnode) {
$(el).selectpicker('val', vnode.context[binding.expression]).trigger('change');
}
});
```
现在,你可以在 Vue 组件中使用 `v-select2` 指令来绑定 Bootstrap Select 的值了。注意,双向绑定的值需要在 Vue 组件的 `data` 选项中定义。
```html
<select v-select2="selected" :options="options"></select>
```
这个例子中,`selected` 是一个在 Vue 组件中定义的变量,它用于双向绑定 Bootstrap Select 的值。`options` 是一个数组,用于渲染 Bootstrap Select 的选项。