如何修復 vue.js 中的“模態不是函數”？

Question

大家好，我收到了這個錯誤：[Vue 警告]：v-on 處理程序中的錯誤：“TypeError：$(...).modal 不是函數”。 modal 不是函數這是我在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>

這是我的 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'
});

這是我的Vue腳本代碼：

<script type="text/javascript">
import axios from 'axios'

export default {
  data(){
      return {
      }
  },
  methods: {  
    openModal(){
        $('#create_form_modal').modal('show');
    }
  }
}
</script>

Answer 1

這是一個類似的問題： Bootstrap modal: is not a function

此問題的原因是腳本的錯誤加載順序。 嘗試按該順序執行此操作

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>

如何修復 vue.js 中的“模態不是函數”？

問題描述

1 個解決方案

解決方案1
0 已采納 2022-06-28 11:27:10

如何修復 vue.js 中的“模態不是函數”？

問題描述

1 個解決方案

解決方案1 0 已采納 2022-06-28 11:27:10

解決方案1
0 已采納 2022-06-28 11:27:10