Vue js - Получение необработанного ReferenceError: jQuery не определено - PullRequest
Новая
       6

Vue js - Получение необработанного ReferenceError: jQuery не определено

1 голос
/ 09 марта 2020

Я новичок в Vue. js и пытаюсь создать пользовательский компонент, который использует плагин jQuery formBuilder . Когда я включаю файл компонента в другой компонент, я получаю сообщение об ошибке:

Uncaught ReferenceError: jQuery не определено в /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>

Я также приложил ошибку screenshot.

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

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

1 Ответ

0 голосов
/ 09 марта 2020

Импорт объекта в приложение 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'

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

...