Hey guys, I need some help with an error that popped up: [Vue warn]: Error in v-on handler: "TypeError: $(...).modal is not a function". The issue is with the modal function Below is the code snippet from my welcome.blade.php:
<body>
<div id="app">
{{-- This is the vue component --}}
<new-arrivals></new-arrivals>
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
This is the content of my js/app.js file:
require('./bootstrap');
import Vue from 'vue'
import { VueCtkDateTimePicker } from 'vue-ctk-date-time-picker';
import swal from 'sweetalert2';
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
// import $ from 'jquery';
// window.$ = $;
window.Vue = require('vue');
window.swal = swal;
Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);
Vue.component('new-arrivals', require('./components/NewArrivals.vue').default);
const app = new Vue({
el: '#app'
});
And finally, here is the script from my Vue component:
<script type="text/javascript">
import axios from 'axios'
export default {
data(){
return {
}
},
methods: {
openModal(){
$('#create_form_modal').modal('show');
}
}
}
</script>