Select2 в Vue.js не определен - PullRequest
       10

Select2 в Vue.js не определен

0 голосов
/ 01 февраля 2019

Я хочу использовать Select2 с Vue.js для отображения некоторых выбираемых опций, но как бы я ни реализовывал их, всегда возникает ошибка:

Uncaught ReferenceError: select2 is not defined

at Object.select2 (external "select2":1)
at __webpack_require__ (bootstrap:766)
at fn (bootstrap:129)
at Module../src/jquery.js (jquery.js:3)
at __webpack_require__ (bootstrap:766)
at fn (bootstrap:129)
at Module../src/main.js (main.js:1)
at __webpack_require__ (bootstrap:766)
at fn (bootstrap:129)
at Object.0 (Home.vue?1405:1)

Я установил пакет npm с помощью этой команды: npm installсохранить2.Я не знаю, является ли это официальным пакетом.Я включил ссылку cdn в index.html и добавил требование в специальный файл (jquery.js), который непосредственно включен в main.js

jquery.js:

import jQuery from 'jquery'
window.jQuery = window.$ = jQuery
require('select2')

Select2.vue:

<script>
    import jQuery from 'jquery';
    let $ = jQuery;

    export default {
        name: 'select2',
        props: ['options', 'value'],

        mounted: function () {

            var vm = this

            $(this.$el).select2({
                    data: this.options,
                    tags: true
                }).on('change', function () {
                    vm.$emit('input', this.value)
                });
        },
        watch: {
            value: function (value) {
                // update value
                $(this.$el)
                    .val(value)
                    .trigger('change')
            },
            options: function (options) {
                // update options
                $(this.$el).empty().select2({data: options,tags: true})
            }
        },
        destroyed: function () {
           $(this.$el).off().select2('destroy')
        }
    }
</script>

1 Ответ

0 голосов
/ 02 февраля 2019

Я также рекомендую другой удивительный компонент Vue Select2 .

Но если вы не можете убедить своего босса, что вы обновите модель в системе Vue легко и вам придется потратить многовремени для разработки, вот несколько идей, чтобы попробовать:

Удалите jquery.js и измените Select2.vue, добавив require('select2') к select2.vue:

<script>
  import jQuery from 'jquery';
  window.jQuery = window.$ = jQuery;
  require('select2');
 ...

, затем вваш родительский компонент использует импорт с относительными путями:

import Select2 from "../stangeComponents/Select2.vue";

Полагаю, вы копируете все из примера компонента Wrapper из Vue docs , и все должно работать ...

Надеюсь, это поможет:)

...