时间戳

首页 > 解决方案 > Vue js - 获取未捕获的 ReferenceError：未定义 jQuery

javascript - Vue js - 获取未捕获的 ReferenceError：未定义 jQuery

问题描述

我是 Vue.js 的新手，并试图创建一个使用 jQuery formBuilder插件的自定义组件。当我将组件文件包含在另一个组件中时，出现错误：

未捕获的 ReferenceError：jQuery 未在 /resources/js/form-b​​uilder.min.js 中定义

我创建了一个名为 name 的自定义组件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>

我也附上了错误截屏。

你们能帮我找出我做错的地方吗？

提前致谢。

标签： javascriptjqueryvue.jsvuejs2vue-component

解决方案

将对象导入 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'

然后您可以将它与示例中的语法一起使用。

推荐阅读