如何在vue JS中通过javascript隐藏bootstrap 5模型？

Question

我在vuejs项目的main.js中导入了bootstrap和jquery。像这样

import $ from "jquery";  // importing jquery
import Popper from "popper.js";  //importing popper js for dropdowns and other stuff bootstrap
import "bootstrap"; // importing bootstrap
import "bootstrap/dist/css/bootstrap.min.css";  //importing dist bootstrap

在我的另一个组件中，有一个模型。我希望它在我成功地发出网络请求时关闭。

在上面的模型中，如果按yes，它将在method属性上激发DeletePost(postid)函数

deletePost(postid) {
    this.$store.dispatch("blog/deletePost", posted);
    $("#deletePostModel").modal("hide");
}

但这会引发一个错误。即未定义错误'$'。因此在该组件中导入jquery，然后错误就消失了。

但现在我得到[Vue warn]:v-on处理程序中的错误：“TypeError：jquery__WEBPACK_IMPORTED_MODULE_1___default()（...）.modal不是函数”在我的deletePost函数中$（“#DeletePostModel”）.modal（“hide”）；模型函数无法识别。我尝试了很多不同的方法

1. 在本地导入引导程序
2. 导入导入“bootstrap/dist/js/bootstrap”；
3. 尝试解决此React错误：__webpack_imported_module_4_jquery__default（...）（...）。modal不是函数
4. 试用引导模式：不是函数
5. 以及更多随机导入jquery和bootstrap的组合（甚至我都不记得了:))

我只想知道如何隐藏模型后，我的网络请求完成，当我点击yes按钮在模型。




Answer 1

我更喜欢的一种选择是创建自己的模态组件，并将jQuery从等式中剔除。下面是一个基于我创建的其他情态动词的示例。并且您仍然可以使用引导类进行造型。

BootstrapModalAlt.Vue

<template>
  <div class="bootstrap-modal-alt">
    <div id="modal-dialog" class="modal-dialog-container">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ titleContent }}</h5>
          <button type="button" class="close" @click="closeModal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>{{ bodyContent }}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" @click="saveChanges">Save changes</button>
          <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      titleContent: {
        type: String,
        required: true
      },
      bodyContent: {
        type: String,
        required: true
      }
    },
    methods: {
      closeModal() {
        this.$emit('close-modal-event');
      },
      saveChanges() {
        this.$emit('save-changes-event');
      }
    }
  }
</script>

<style scoped>
  .modal-dialog-container {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-content {
    margin: 10% auto;
    width: 60%;
  }
</style>

Parent.Vue

<template>
  <div class="parent">
    <h4>Demo of Alternative to Bootstrap 4 Modal</h4>
    <div class="row">
      <div class="col-md-6">
        <button type="button" class="btn btn-secondary" @click="showModal = true">Show Modal</button>
      </div>
    </div>

    <bootstrap-modal-alt v-if="showModal"
    :titleContent="modalTitle"
    :bodyContent="modalBody"
    @close-modal-event="closeModal"
    @save-changes-event="saveChanges" />
</div>
</template>

<script>
  import BootstrapModalAlt from './BootstrapModalAlt.vue'

  export default {
    components: {
      BootstrapModalAlt
    },
    data() {
      return {
        showModal: false,
        modalTitle: "Modal Title",
        modalBody: "Modal Body"
      }
    },
    methods: {
      closeModal() {
        this.showModal = false;
      },
      saveChanges() {
        // Add logic to save changes
        this.closeModal();
      }
    }
  }
</script>