如何在Vue方法中以编程方式打开模态框组件

首先修正模态框组件的一个逻辑错误：原代码中message的判断条件错误，应该使用preset.message而非preset.title，否则无法正确显示自定义提示内容：

<script>
export default {
  props: ['preset'],
  data() {
    return {
      title: this.preset.title ? this.preset.title : 'Informacja',
      // 修正判断条件为preset.message
      message: this.preset.message ? this.preset.message : 'Zmiany zostały zapisane.',
    }
  },
}
</script>

接下来提供两种可行的实现方式：

方式一：直接调用Bootstrap模态框API #

无需过多修改组件，直接利用Bootstrap官方JS API控制模态框显示：

在更新资料组件的updateProfile方法中，完成更新请求后触发模态框：

async updateProfile() {
  try {
    // 此处编写资料更新逻辑，比如调用后端API
    // 示例：await this.$axios.put('/api/user/profile', { name: this.user.name, ... });
    
    // 更新成功后获取模态框元素并显示
    const modalEl = document.getElementById('modalChangesSaved');
    if (modalEl) {
      const modal = new bootstrap.Modal(modalEl);
      modal.show();
    }
  } catch (err) {
    // 处理更新失败的情况
    console.error('资料更新失败:', err);
  }
}

注意：确保模态框组件已挂载到当前页面DOM中（比如在父组件或全局引入）。

方式二：Vue组件化调用（推荐） #

更符合Vue组件化思想，通过组件引用直接控制模态框：

1. 给模态框组件添加显示方法：

<script>
export default {
  props: ['preset'],
  data() {
    return {
      title: this.preset.title ? this.preset.title : 'Informacja',
      message: this.preset.message ? this.preset.message : 'Zmiany zostały zapisane.',
    }
  },
  methods: {
    // 添加显示模态框的方法
    openModal() {
      const modal = new bootstrap.Modal(this.$refs.hujek);
      modal.show();
    }
  }
}
</script>

2. 在更新资料组件中引入并使用模态框组件：

<template>
  <div>
    <div class="card bg-transparent border rounded-3">
      <div class="d-sm-flex justify-content-end">
        <button type="button" class="btn btn-primary mb-0" @click="updateProfile">Save</button>
      </div>
    </div>
    <!-- 引入模态框组件并设置ref，传入自定义提示内容 -->
    <modal-changes-saved 
      ref="profileSavedModal" 
      :preset="{ title: '资料更新成功', message: '您的个人资料已成功保存' }"
    ></modal-changes-saved>
  </div>
</template>

<script>
// 根据项目结构调整组件导入路径
import ModalChangesSaved from './ModalChangesSaved.vue';

export default {
  props: ['user'],
  components: {
    ModalChangesSaved
  },
  methods: {
    async updateProfile() {
      try {
        // 执行资料更新请求
        // await this.$axios.put('/api/user/profile', { ...更新参数 });
        
        // 调用模态框的显示方法
        this.$refs.profileSavedModal.openModal();
      } catch (err) {
        console.error('资料更新失败:', err);
      }
    },
  },
};
</script>

内容的提问来源于stack exchange，提问作者Wraith