如何使用带有 vuejs 指令和 browserify 的引导选择插件

Posted 2023-02-22

【中文标题】如何使用带有 vuejs 指令和 browserify 的引导选择插件

【英文标题】：How to use bootstrap select plugin with vuejs directive and browserify

【发布时间】：2016-05-26 21:22:13

【问题描述】：

我想在 vuejs 项目上使用引导选择插件，但我对如何将它作为指令合并到我的项目中感到困惑。在查看 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');

【参考方案1】：

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

当require("bootstrap-select"); 运行时，jquery 必须作为$ 可用。这是我在我的应用中使用它的方式：

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

这三个都需要以正确的顺序调用，否则它们将无法正确地相互扩展