Question

我有一个Bootstrap模式，它在这个Vue方法上显示出来：

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

这适用于该方法属于根Vue实例的项目。但是，我现在尝试在Vue组件中使用此模态和方法。该方法由@click="showAddSongModal()调用，但当它放入组件中时，我会在点击时收到此错误：

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

否则，Chrome开发工具中的页面加载时没有错误。更重要的是，在控制台输入$('#addSongModal').modal('show');的行为就像它应该的那样 - 模态有效！

到目前为止，我查了一下：

jQuery被调用但是一次。
jQuery，Bootstrap，Vue，Axios等。在我的Vue组件之前调用。

@click="showAddSongModal()从控制台运行的事实应该验证我的构建过程，对吗？

为什么这个模态和方法在根Vue实例中起作用，但在放入Vue组件时会导致Uncaught TypeError？

我的项目有Vue组件，每个组件都在一个组件文件中，并包含如下：

<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.

笔可以正常工作，但在我的实际项目$('#addSongModal').modal('show');中，只能在控制台而不是组件中工作：

Answer 1

我在这个项目中使用Laravel 5.4.14框架。使用webpack，我把这样的.js文件混合在一起：

.js文件需要整个网站（JQuery，Bootstrap，Vue等）合并为一个app.js
特定于后端的.js文件，例如我的Vue实例和专门的脚本到require('./bootstrap');

bootstrap.js只有以下一行要求bootstrap.js：

backend.js

需要

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 }, });（JQuery，Bootstrap，Vue等）。

<script src="js/app.js"></script> <script src="js/backend.js"></script>看起来像这样：

require('./bootstrap');

然后对于后端页面，html调用这样的文件：

backend.js

那不行。

将app.js添加到http:request/4并删除http:request/4后，未捕获的TypeError就会消失。

Answer 2

在组件中，模板中只能有一个根元素。你需要做的是将你的按钮和模态包装在一个div（或其他一些元素）中，你的组件就可以工作。

在失败的codepen中将模板更改为此。

<div>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary mt-3 ml-3" @click="showAddSongModal()">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="addSongModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" v-text="message"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Working version

Vue2组件方法中的错误在从控制台调用时仍然有效

2 个答案: