我有一个小的形式,这是一个弹出用它可以通过复选框被选中的选项。我有Vue.js和bootbox去实现它。我使用的是引导-VUE插件。
当我运行它,我得到以下错误信息:
“未捕获的SyntaxError:意外令牌<bootbox.min.js:1”
“未捕获的错误:$ .fn.modal没有定义,请仔细检查你已经包含了引导JavaScript库见http://getbootstrap.com/javascript/更多细节bootbox.js:584。”
我安装了新公共管理包。我加
<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>
我希望bootbox出现,但似乎什么都没有。唯一的错误消息。难道是一般可以使用Vue.js与bootbox?我需要做什么?
首先,你是混合不同类型的“包括”语句(import
和require
)。你应该用一个单一的一个棒。
幽州使用引导-VUE,但你仍然包括“香草”引导JavaScript文件。这似乎是错误的。另外,我不认为引导-VUE使用jQuery的,因此可能不会很好地与bootbox玩。
最后,您复制jQuery和bootbox的“加载”。他们两人都“装”通过节点,并与script
标签。这是自找麻烦,因为这两个库在不同环境中存在两次。你不解释你构建流水线,但假设它的WebPack的script
标签应支持删除“包括”在你的js应用。
我的例如VUE的应用程序有这种说法的引导:
import 'bootstrap';