javascript - $(...).modal() 不是 nuxt js 函数

Question

我正在尝试根据路线更改切换 vue 组件中的模式。当调用 $("#loginModal").modal("show"); 时nuxt 显示 .modal 不是一个函数。

我已在 nuxt.config.js 文件中以正确的顺序导入了 jQuery 和 bootstrap.js。

我尝试从 node_modules 文件夹和 CDN 引用 bootstrap.js 文件，所以我确信包含 lib 不会出现错误。

模态组件

<template>
    <div class="modal fade" id="loginModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p>Test modal</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {return {

        }}, 
        watch: {
            $route (to, from) {
                if (to.query.modal == "login") {
                    $("#loginModal").modal("show");
                } else {
                    $('#loginModal').modal("hide");
                }
            }
        }
    }
</script>

nuxt.config.js

module.exports = {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || 'website name ;)',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      {
        src: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js",
        type: "text/javascript"
      },

      {
        src: "https://kit.fontawesome.com/a772a37d1d.js", 
        type: "text/javascript"
      },

      {
        src: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js", 
        type: "text/javascript" 
      }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
    "~/assets/css/main.css"
  ],
 
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
    // "@nuxtjs/dotenv",
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

Answer 1

我建议检查以下链接以了解此问题
https://codesandbox.io/s/733xo5v390