Hello everyone I got this error: [Vue warn]: Error in v-on handler: "TypeError: $(...).modal is not a function". modal is not a fuction Here is my code in 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>
Here is my js/app.js:
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'
});
Here is my vue script code:
<script type="text/javascript">
import axios from 'axios'
export default {
data(){
return {
}
},
methods: {
openModal(){
$('#create_form_modal').modal('show');
}
}
}
</script>
Here is a similar issue: Bootstrap modal: is not a function
The reason for this problem was the wrong loading order of the scripts. Try to do this in that order
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>