Синтаксические ошибки в коде vue.js для автозаполнения - PullRequest
Новая
       8

Синтаксические ошибки в коде vue.js для автозаполнения

0 голосов
/ 18 декабря 2018

Привет, я пытаюсь компонент автозаполнения / typeahead для 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

Было бы замечательно, если бы кто-то мог помочь мне в этом.

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Код <script src="https://unpkg.com/vue-bootstrap-typeahead"></script> импортировал VueBootstrapTypeahead и стал свойством окна. Вам больше не нужно import.когда мы говорим о import, часто к нам приходит и концерт module.Объявления import часто использовались в приложении, которое необходимо преобразовать с помощью таких инструментов, как babel, webpack или rollup.

0 голосов
/ 18 декабря 2018

Пожалуйста, добавьте это к <head> вашего документа перед <link> тегами: 

<meta charset="UTF-8">
...