Vue中Bootstrap Modal传参：动态设置标题与关联JSON文件问题

环境依赖 #

• vue: ^2.6.12
• bootstrap: ^4.6.0
• bootstrap-vue: ^2.21.2

需求 #

复用同一个Bootstrap模态框，为不同触发场景传递两类参数：

1. 动态设置模态框头部的centeredTitle标题
2. 指定要读取并转换为数组的JSON数据源

现有代码 #

触发按钮代码 #

<input 
  v-b-modal.modal-center 
  role="button" 
  class="btn btn-link" 
  type="button" 
  value="Edit" 
  aria-disabled="false" 
  style="height: 40px; width: 120px; background-color: #efefef; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;"
/>

模态框代码 #

<b-modal id="modal-center" size="xl" @shown="onModalShown" @ok="onModalOk">
  <template slot="modal-title">{{ centeredTitle }}</template>
</b-modal>

模态框钩子函数代码 #

onModalShown() {
  // Clear the year and data fields
  if (this.firstModalshow) {
    // this.centeredTitle ='Education and Training',
    this.newYear = '';
    this.newData = '';
    this.$refs.yearInput.focus();
    this.tempItem = JSON.parse(JSON.stringify(this.EducationTraining));
    this.firstModalshow = false;
  }
},

遇到的问题 #

直接在代码中固定赋值centeredTitle可正常显示，但取消注释onModalShown中动态设置centeredTitle的代码后，页面编译通过却变成空白。

解决方案 #

方法1：通过v-b-modal指令传递参数 #

利用Bootstrap-Vue指令的参数传递能力，给不同触发按钮携带自定义参数：

<!-- 编辑教育训练的触发按钮 -->
<input 
  v-b-modal:[`modal-center?title=教育训练&jsonKey=EducationTraining`]
  role="button" 
  class="btn btn-link" 
  type="button" 
  value="Edit" 
  aria-disabled="false" 
  style="height: 40px; width: 120px; background-color: #efefef; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;"
/>

<!-- 编辑工作经历的触发按钮 -->
<input 
  v-b-modal:[`modal-center?title=工作经历&jsonKey=WorkExperience`]
  role="button" 
  class="btn btn-link" 
  type="button" 
  value="Edit" 
  aria-disabled="false" 
  style="height: 40px; width: 120px; background-color: #efefef; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;"
/>

修改onModalShown钩子解析参数：

onModalShown(e) {
  // 解析传递的参数
  const paramStr = e.component.$bvModal.getProps().value.split('?')[1];
  if (paramStr) {
    const params = new URLSearchParams(paramStr);
    this.centeredTitle = params.get('title');
    const jsonKey = params.get('jsonKey');
    this.tempItem = JSON.parse(JSON.stringify(this[jsonKey]));
  }

  // 原有重置逻辑
  this.newYear = '';
  this.newData = '';
  this.$refs.yearInput?.focus();
  this.firstModalshow = false;
},

方法2：通过点击事件提前配置参数 #

放弃v-b-modal自动触发，手动控制模态框打开，先配置参数再显示：

<input 
  @click="openModal('教育训练', 'EducationTraining')"
  role="button" 
  class="btn btn-link" 
  type="button" 
  value="Edit" 
  aria-disabled="false" 
  style="height: 40px; width: 120px; background-color: #efefef; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;"
/>

添加对应方法：

data() {
  return {
    centeredTitle: '',
    firstModalshow: true,
    EducationTraining: {}, // 确保数据源已定义
    WorkExperience: {}
  }
},
methods: {
  openModal(title, jsonKey) {
    this.centeredTitle = title;
    this.tempItem = JSON.parse(JSON.stringify(this[jsonKey]));
    this.$bvModal.show('modal-center');
  },
  onModalShown() {
    this.newYear = '';
    this.newData = '';
    this.$refs.yearInput?.focus();
    this.firstModalshow = false;
  }
}

页面空白问题排查修复 #

之前的空白问题大概率由以下原因导致，需同步修复：

1. 未初始化变量：确保centeredTitle、firstModalshow在data()中声明并初始化
2. 语法错误：原注释行末尾的逗号会导致语法异常，需删除
3. 数据源未定义：确保EducationTraining等JSON数据源已在实例中声明

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