代码之家 › 专栏 › 技术社区 › vimuth

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

vue-component vuejs2 vue.js

vimuth · 技术社区 · 7 年前

嗨,我想 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>

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

语法错误:导入声明只能出现在模块的顶层

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

如果有人能帮助我,那就太好了。

2 回复 | 直到 7 年前

Tony_zha 7 年前

代码 <script src="https://unpkg.com/vue-bootstrap-typeahead"></script> 已导入 VueBootstrapTypeahead 并成为Window的一个属性。您不需要 import 再一次。当我们谈论 进口 通常 module 音乐会也来了。 进口 声明通常用于需要通过工具(如 babel , webpack 或 rollup .

mbuechmann 7 年前

请把这个加到 <head> 你的文件之前 <link> 标签:

<meta charset="UTF-8">

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

3 年前

Park · Vuejs道具,路径较长

4 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

4 年前

roev · 大堆来自(物体)。forEach不使用vue。js

4 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

8 年前

Ready Dev · Axios一次发出多个请求(vue.js)

8 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

8 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

8 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

8 年前

Tim · VueJS-迭代从AJAX调用返回的数据

8 年前