Vue js-Getting Uncaught ReferenceError: jQuery не определен

Vue js-Getting Uncaught ReferenceError: jQuery не определен

09.03.2020 04:19:44 Просмотров 13 Источник

Я новичок в vue js и пытаюсь создать пользовательский компонент, который использует плагин jQuery formBuilder. Когда я включаю файл компонента в другой компонент, я получаю ошибку Uncaught ReferenceError: jQuery is not defined in /resources/js/form-builder.min.js. я создал пользовательский компонент с именем formBuilder.vue. Вот код компонента:

 <template>
    <div class="content">
        <formBuilder/>
    </div>
</template>

<script>
    // import './jquery.min.js';
    // import './jquery-ui.min.js';
    // import './form-builder.min.js';
    export default {      
        created() {

        },
        data() {
            return { 

            }
        },
        mounted() {
          jQuery(this.$el).formBuilder();
        },
        methods: {
        }
    }
</script>

В файле app.js, который помещен в resource/js/app.js, я вызываю этот vue для рекурсивного использования другими компонентами:

 window.Vue = require('vue');

    require('./bootstrap');
    require('admin-lte');
    require('./datatable');
    import router from './router';
    import Datepicker from 'vuejs-datepicker';
    import CKEditor from 'ckeditor4-vue';
    import FullCalendar from 'vue-full-calendar';
    import 'fullcalendar/dist/fullcalendar.css'
    import Vue from 'vue';
    import jQuery from 'jquery'
    import './form-builder.min.js';
    Vue.use(VueRouter)
    Vue.use(FullCalendar);
    Vue.use(CKEditor)
    Vue.component("vue-datepicker", Datepicker);
    Vue.component('FormBuilder', require('./components/tools/formBuilder.vue').default);
    const app = new Vue({
      el: '#app',
      router
    });

Это файл компонента, в котором я использую компонент formbuilder

  <template>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Questionnaire</h1>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="card">
                            <FormBuilder/> <!--- used formbuilder component --->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        created() {
        },
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

Я также приложил скриншот ошибки.

Можете ли вы, ребята, помочь мне там, где я делаю неправильно?

заранее спасибо.

У вопроса есть решение - Посмотреть?

Ответы - Vue js-Getting Uncaught ReferenceError: jQuery не определен / Vue js - Getting Uncaught ReferenceError: jQuery is not defined

Является ответом!
Dan

09.03.2020 06:08:48

Импорт объекта в приложение Vue JS автоматически не создает этот объект для использования другими компонентами.

Есть по крайней мере два способа сделать это (хотя я рекомендую избегать всего этого и просто импортировать jQuery в нужные компоненты):

Вариант 1: Vue.prototype

В вашем приложении JS добавьте jQuery в прототип Vue после его импорта, что сделает его доступным для каждого компонента, использующего синтаксис this.jQuery:

Vue.prototype.jQuery = jQuery

Вариант 2: Объект window

Кроме того, вы можете добавить его в объект окна после импорта и использовать его как window.jQuery:

window.jQuery = jQuery

Вариант 3: индивидуальный импорт

Вероятно, это более читабельно/ремонтопригодно, чтобы просто импортировать его в компоненты, которые его используют:

import jQuery from 'jquery'

и тогда вы можете использовать его с синтаксисом в вашем примере.

Закрыть X