Question

我想在vuejs项目中使用bootstrap select插件，我对如何将它作为指令合并到我的项目中感到困惑。在查看vuejs网站中的select2示例后，我想出了以下内容。

<span id="el">
  <select class="selectpicker" data-style="btn-primary" v-selectpicker="selected" :options="workflow">
    <option value="0">default</option>
  </select>                                                    
</span>

这是我的指示和观点

require("bootstrap-select");

Vue.directive('selectpicker',{  

    twoWay: true,

    deep: true,

    bind: function() {          
        $(this.el).selectpicker().on("change", function(e) {
            this.set($(this.el).val());
        }.bind(this));
    },
    update: function (value) {
        $(this.el).selectpicker('refresh').trigger("change");
    },
    unbind: function () {
        $(this.el).off().selectpicker('destroy');
    }
});


new Vue({

    el: '#el',

    data: {

        tasksLoaded: false,
        tasks: [],
        workflow: [
            {
                id:'todo',
                value: 'To Do'
            }, 
            {
                id: 'backlog', 
                value: 'Backlog'
            },
            {
                id: 'doing', 
                value: 'Doing'
            },
            {
                id: 'restest', 
                value:'Retest'
            },
            {
                id: 'completed', 
                value: 'Completed'
            },
            {
                id: 'deployed',
                value: 'Deployed'
            }
        ],
        sections:[],
        tests:[],
        sectionId: '',
        testId: ''
    },

    watch: {            
        // watch these particular models for changes and then fire on trigger       
        sectionId: function(value) {                        
            this.getTests(value);                   
        },
        testId: function(value) {
            this.getResults(value);
        }
    }
});

我最终收到错误

Uncaught TypeError: $(...).selectpicker is not a function

我已经检查过是否已经被调用并且它已经存在。

另外，我正在使用laravel spark，因此它已经通过

在app.js文件中定义了jQuery

require('laravel-spark/core/bootstrap');

Answer 1

你能告诉我们你在哪里包括jQuery和Bootstrap吗？

运行$时，

jquery必须以require("bootstrap-select");的形式提供。这是我在我的应用程序中的方式：

window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('bootstrap-select');

这些需要以正确的顺序调用所有3，否则它们将无法正确地相互扩展

如何使用带有vuejs指令和browserify的bootstrap select插件

1 个答案: