Hola a todos, recibí este error: [Vue warn]: Error en el controlador v-on: "TypeError: $(...).modal is not a function". modal no es una función Aquí está mi código en 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>Aquí está mi 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' });Aquí está mi código de secuencia de comandos vue:
<script type="text/javascript"> import axios from 'axios' export default { data(){ return { } }, methods: { openModal(){ $('#create_form_modal').modal('show'); } } } </script>Aquí hay un problema similar: Bootstrap modal: no es una función
El motivo de este problema fue el orden de carga incorrecto de los scripts. Intenta hacerlo en ese orden.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="{{ asset('js/app.js') }}" defer></script>