时间戳

首页 > 解决方案 > vue.js 代码中用于自动完成的语法错误

vue.js - vue.js 代码中用于自动完成的语法错误

问题描述

嗨，我正在尝试为 Vue 2 和 Bootstrap 4 自动完成/预先输入组件 这是我的代码。

<html>
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://unpkg.com/vue-bootstrap-typeahead/dist/VueBootstrapTypeahead.css" rel="stylesheet">
    </head>
    <body>

        <div id="container">
            <vue-bootstrap-typeahead 
                v-model="query"
                :data="['Canada', 'USA', 'Mexico']" />
        </div>

        <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <script src="https://unpkg.com/vue-bootstrap-typeahead"></script>
        <script>
            import VueBootstrapTypeahead from 'vue-bootstrap-typeahead';
            Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead);

            new Vue({
                el: '#container',
                data: {
                    value: '',
                },
            });
        </script>

    </body>
</html>

不幸的是，由于以下错误，这不起作用。

SyntaxError：导入声明只能出现在模块的顶层

源映射错误：请求失败，状态为 404 资源 URL： https ://unpkg.com/vue-bootstrap-typeahead 源映射 URL：VueBootstrapTypeahead.umd.min.js.map

如果有人可以帮助我，那就太好了。

标签： vue.jsvuejs2vue-component

解决方案

代码<script src="https://unpkg.com/vue-bootstrap-typeahead"></script>已经导入了VueBootstrapTypeahead，变成了window的一个属性，你就不需要import了。当我们谈论时import，往往module音乐会也来找我们。import声明经常用在需要通过工具转换的应用程序中，例如babel,webpack或rollup.

推荐阅读