Можно ли использовать bootbox с Vue.js? - PullRequest
Новая
       15

Можно ли использовать bootbox с Vue.js?

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

У меня есть небольшая форма, в которой есть всплывающее окно с параметрами, которые можно выбрать с помощью флажков.Я должен понять это с Vue.js и bootbox.Я использую плагин bootstrap-vue.

Когда я запускаю его, я получаю следующие сообщения об ошибках:

"Uncaught SyntaxError: Неожиданный токен

"Uncaught Error: $ .fn.modal не определен; пожалуйста, проверьте еще раз, что вы включили библиотеку JavaScript Bootstrap. Подробнее см. http://getbootstrap.com/javascript/. Bootbox.js: 584"

Я установил пакет npm.Я добавил 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="bootbox.min.js"></script>

в тело моего index.html.И я добавил 

var bootbox = require('bootbox');

к компоненту * .vue. 

<script>
import JQuery from 'jquery'
let $ = JQuery
var bootbox = require('bootbox');

export default {
    name: 'eingabe',
    data: function () {
        return {
            kundeUebertrag: '',
            ergebniseins: '',
            ergebniszwei: '',
            ergebnisstring: '',
            ergebnisstring2: '',
            kundeNummer: '',
            bereichNummer: '',
            eventNummer: '',
            siteId: '',
            obj: '',
            ergarray: [],
            innerobj1: '',
            innerobj2: '',
            feldSichtbar: 'none'

        }
    },


    methods: {
        aufrufeins: function() {
            let vm = this;
            let neueDaten = document.formular;
            neueDaten.addEventListener('submit',function(evt) {
                evt.preventDefault();
            });

            vm.kundeUebertrag = vm.kundeMatomo;
            $.getJSON("/api/pruefung.php", { kundeUebertrag: 
                this.kundeUebertrag}, function (result) {
                vm.ergebniseins = result;                           
                vm.ergebnisstring = vm.ergebniseins[0];               
                vm.ergebnisstring2 = vm.ergebnisstring.returnmeldung;
                vm.obj = JSON.parse(vm.ergebnisstring2);
                if(vm.obj.status == "neuanlage")
                {
                    vm.siteId = vm.obj.siteid;
                }
                if(vm.obj.status == "rueckfrage")
                {
                    for (var prop in vm.obj)
                    {
                        vm.innerobj1 = vm.obj[prop][0];
                        for (var props in vm.innerobj1)
                        {
                            vm.innerobj2 = vm.innerobj1[props][0];
                            console.log(vm.innerobj2.kunde)
                            vm.ergarray.push(vm.innerobj2);

                        }
                    }
                    vm.ergebniseins = vm.ergebnisstring2;               
                    vm.feldSichtbar = 'block';
                    bootbox.prompt({
                        title: "Bitte einen Kunden auswählen",
                        inputType: 'checkbox',
                        inputOptions: [
                            {
                                text: 'Choice One',
                                value: '1',
                            },
                            {
                                text: 'Choice Two',
                                value: '2',
                            },
                            {
                                text: 'Choice Three',
                                value: '3',
                            }
                        ],
                        callback: function (result) {
                            console.log(result);
                        }
                    });

                }
            });
        },


    }
}
</script>

Я ожидаю появления загрузочной коробки, но ничего не появляется.Только сообщения об ошибках.Можно ли вообще использовать Vue.js с bootbox?Что мне делать?

1 Ответ

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

Во-первых, вы смешиваете различные типы операторов включения (import и require).Вы должны придерживаться одного.

Вы заявляете, что используете bootstrap-vue, и все же вы все еще включаете ванильные файлы Bootstrap javascript.Это кажется неправильным.Кроме того, я не думаю, что bootstrap-vue использует jQuery, поэтому он, вероятно, не будет хорошо работать с bootbox.

Наконец, вы дублируете «загрузку» jQuery и bootbox.Оба они «загружаются» через Node, а также с тегами script.Это вызывает проблемы, потому что обе библиотеки будут существовать дважды в разных контекстах.Вы не объясняете свой конвейер сборки, но, предполагая, что это Webpack, теги script должны быть удалены в пользу «include» в вашем приложении js.

Например, мое приложение vue имеет следующий оператор для Bootstrap:

import 'bootstrap';

...