how fix "modal is not a function" in vue.js?-CodePudding

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>

CodePudding user response：

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>