Question

嗨，我正在尝试autocomplete/typeahead component for Vue 2 and 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

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

Answer 1

请将其添加到文档的<head>标签之前的<link>：

<meta charset="UTF-8">

Answer 2

代码<script src="https://unpkg.com/vue-bootstrap-typeahead"></script>已导入VueBootstrapTypeahead，并成为window的属性。您不再需要import。当我们谈论import时，常常也会来module演唱会。 import声明经常用在需要通过babel，webpack或rollup之类的工具进行转换的应用中。

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

2 个答案: