$ (...). modal () не является функцией nuxt js - PullRequest
Новая
       21

$ (...). modal () не является функцией nuxt js

0 голосов
/ 06 апреля 2020

Я пытаюсь переключить модальное в vue компоненте на основе изменения маршрута. При вызове $ ("# loginModal"). Modal ("show"); nuxt показывает, что .modal не является функцией.

Я импортировал jQuery и bootstrap. js в файл nuxt.config. js и в правильном порядке.

Я попытался сослаться на файл bootstrap. js из папки node_modules и из CDN, поэтому я уверен, что это не ошибка при включении 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) {
    }
  }
}

1 Ответ

1 голос
/ 06 апреля 2020

Я рекомендую проверить ссылку ниже для этой проблемы
https://codesandbox.io/s/733xo5v390

...