I am new to Vue.js and trying to create a custom ponent that uses jQuery formBuilder plugin. When I include the ponent file inside another ponent, I am getting an error:
Uncaught ReferenceError: jQuery is not defined in /resources/js/form-builder.min.js
I created a custom ponent with name formBuilder.vue. Here is the ponent code:
<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>
In app.js file, which is placed in resource/js/app.js, I am calling this vue to be recursively used by other ponents:
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)
Vueponent("vue-datepicker", Datepicker);
Vueponent('FormBuilder', require('./ponents/tools/formBuilder.vue').default);
const app = new Vue({
el: '#app',
router
});
This is the ponent file where i am using formbuilder ponent
<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 ponent --->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created() {
},
data() {
return {
}
},
methods: {
}
}
</script>
I have attached the error as well.
Can you guys help me find where I am doing wrong?
Thanks in Advance.
I am new to Vue.js and trying to create a custom ponent that uses jQuery formBuilder plugin. When I include the ponent file inside another ponent, I am getting an error:
Uncaught ReferenceError: jQuery is not defined in /resources/js/form-builder.min.js
I created a custom ponent with name formBuilder.vue. Here is the ponent code:
<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>
In app.js file, which is placed in resource/js/app.js, I am calling this vue to be recursively used by other ponents:
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.ponent("vue-datepicker", Datepicker);
Vue.ponent('FormBuilder', require('./ponents/tools/formBuilder.vue').default);
const app = new Vue({
el: '#app',
router
});
This is the ponent file where i am using formbuilder ponent
<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 ponent --->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created() {
},
data() {
return {
}
},
methods: {
}
}
</script>
I have attached the error as well.
Can you guys help me find where I am doing wrong?
Thanks in Advance.
Share Improve this question edited Apr 6, 2020 at 9:51 Dan 63.2k18 gold badges111 silver badges119 bronze badges asked Mar 9, 2020 at 13:19 DevDDevD 3642 gold badges4 silver badges14 bronze badges 1- Does this answer your question? JQuery - $ is not defined – rx2347 Commented Mar 9, 2020 at 13:36
2 Answers
Reset to default 2Importing an object into Vue's app JS doesn't automatically produce that object for use by other ponents.
There are at least two ways to do this (though I remend avoiding all this and just importing jQuery in the ponents that need it):
Option 1: Vue.prototype
In your app JS, add jQuery to the Vue prototype after you import it, which will make it accessible to every ponent using the syntax this.jQuery:
Vue.prototype.jQuery = jQuery
Option 2: window object
Alternatively, you could add it to the window object after importing and use it like window.jQuery:
window.jQuery = jQuery
Option 3: Individual imports
It's probably more readable/maintainable to simply import it in ponents that use it:
import jQuery from 'jquery'
and then you can use it with the syntax in your example.
That worked for me (Vue 3) for some reason i had to stop the cli and restart
window.$ = window.jQuery = require('jquery');
Eslint may return "Unexpected top level property" "$". You will need to insert an exception in your package.json
"env": {
...
"jquery": true,
},
It is important to know that jquery will only be available in .vue files. Therefore, your extensions and libraries may report an error. In these cases you will have 2 options:
- Transform libraries into a .vue template
- Make a local import on top of them.
import jQuery from 'jquery'
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744271135a4566107.html
评论列表（0条）