Error in Vue2 Component Method Yet Works When Called From the Console

Question

I have a Bootstrap modal that shows itself on this Vue method:

methods: {
    showAddSongModal() {
        $('#addSongModal').modal('show');
    }
}

This works in a project where the method is of the root Vue instance. However, I am now trying to use this modal and method in a Vue component. The method is invoked by @click="showAddSongModal() but when it's put inside a component, I get this error on click:

Uncaught TypeError: $(...).modal is not a function

Otherwise, the page loads without errors in Chrome Dev Tools. And what's more, typing $('#addSongModal').modal('show'); at the console behaves like it should -- the modal works!

Thus far, I checked:

jQuery is called but once.
jQuery, Bootstrap, Vue, Axios, et al. are called before my Vue components.

The fact that @click="showAddSongModal() works from the console should validate my build process, right?

Why does this modal and method work from a root Vue instance but cause the Uncaught TypeError when placed inside a Vue component?

My project has the Vue components, each in a component file and included like this:

<template>
    <div class="song-table">
        <song-modal-form></song-modal-form>
        <div class="table-header d-flex justify-content-between align-items-center mt-3">
            <form id="search" class="">
                Search <input name="query" v-model="filterKey"> 
            </form>
 ....
html continues

<script>
    import SongModalForm from './SongModalForm.vue';

    export default {

        components: {
            SongModalForm
        },
 ....
        methods: {
            showAddSongModal() {
                    console.log('HELP!');
                    $('#addSongModal').modal('show');
            },
  ....
</script>

This Pen shows the scenario, a parent component calling the child component with the modal.

The pen works, but in my actual project $('#addSongModal').modal('show'); is only working from the console and not from the component:

What is it you're putting in the component? The button? The modal? Both? — Bert
Both. Here is the component version so far: codepen.io/stwilson/pen/bqEoXL — STWilson

STWilson STWilson · Accepted Answer · 2017-03-02T03:38:12

I am using Laravel 5.4.14 framework in this project. Using webpack, I was mixing together .js files like this:

.js files required site-wide (JQuery, Bootstrap, Vue, et al) into one app.js
backend-specific .js files like my Vue instance and specialized scripts into backend.js

app.js had only the following one line to require bootstrap.js:

require('./bootstrap');

bootstrap.js required (JQuery, Bootstrap, Vue, et al).

backend.js looked something like this:

import SpecialComponent from './components/SpecialComponent.vue';
import LoginModal from './components/LoginModal.vue';
import RegisterModal from './components/RegisterModal.vue';
import SongTable from './components/SongTable.vue';

Vue.config.ignoredElements = [
  'wave'
];

const app = new Vue( {
    el: '#app-backend',

    components: {
        SpecialComponent ,
        LoginModal,
        RegisterModal,
        SongTable
    },

    data: {
        currentPath: window.location.pathname
    },
});

Then for a backend page, the html called the files like this:

<script src="js/app.js"></script>
<script src="js/backend.js"></script>

That DID NOT WORK.

Once require('./bootstrap'); was added to backend.js and I dropped app.js, the Uncaught TypeError went away.

Error in Vue2 Component Method Yet Works When Called From the Console

2 Answers