BootstrapVue模态框为空且selectedItem为null的问题求助

1. 配置Vue自定义分隔符（关键） #

因为和Jinja2冲突使用<% %>替代{{ }}，必须在Vue实例中明确配置分隔符，否则Vue无法正确解析你的插值表达式：

new Vue({
  el: '#app',
  delimiters: ['<%', '%>'], // 告诉Vue使用自定义分隔符
  data() {
    return {
      selectedItem: null,
      modalVisible: false,
      tableData: [] // 你的表格数据源
    }
  },
  // ... 其他选项
})

2. 正确绑定表格行点击事件 #

在b-table上绑定@row-clicked事件，将点击的行数据赋值给selectedItem，同时触发模态框显示：

<b-table 
  :items="<% tableData %>" 
  @row-clicked="handleRowClick"
  <!-- 你的其他表格配置：列定义、可编辑数量输入框等 -->
></b-table>

对应的方法实现：

methods: {
  handleRowClick(rowItem) {
    // 直接将点击的行数据赋值给selectedItem
    this.selectedItem = rowItem;
    // 打开模态框
    this.modalVisible = true;
  }
}

3. 模态框内容绑定修正 #

确保模态框中仅在selectedItem存在时渲染图片，避免空值报错：

<b-modal v-model="<% modalVisible %>" title="商品图片">
  <div v-if="<% selectedItem %>">
    <img 
      :src="<% selectedItem.imageUrl %>" 
      alt="商品图片"
      style="max-width: 100%; max-height: 400px;"
    >
  </div>
  <div v-else>暂无图片</div>
</b-modal>

排查要点 #

• 检查tableData中的每条数据是否包含imageUrl字段（或你实际存储图片路径的字段）
• 确认行点击事件确实触发：可以在handleRowClick中加console.log(rowItem)，查看控制台是否输出行数据
• 确保模态框的v-model绑定的变量和控制显示的变量一致（比如上面的modalVisible）

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