Bootstrap Vue中表格行属性值传递至模态框异常问题排查

这个问题我之前也碰到过，核心原因很明确：你给表格里所有行的模态框都设置了同一个id="modal1"。当Vue渲染整个表格时，后面行的模态框会覆盖前面的同名模态框，所以不管你点击哪一行的按钮，实际上触发的都是最后一行渲染出来的那个模态框，自然显示的是最后一行的数据。而按钮文本能正常显示对应行的数据，是因为按钮是每行独立渲染的，每个按钮绑定的row.item.api_id都是当前行的上下文。

修复步骤 #

我们需要给每个模态框生成唯一ID，同时用一个全局变量存储当前点击行的数据，让模态框使用这个全局变量来展示内容：

1. 在你的组件中添加一个响应式变量，用来存储当前点击的行数据：

// 在Vue组件的data选项里添加
data() {
  return {
    // ... 其他已有变量
    currentEventItem: null,
    show1: false
  }
}

2. 修改模板部分，给每个模态框生成唯一ID，并在点击按钮时把当前行数据赋值给currentEventItem：

<b-table sticky-header selectable select-mode="single" selected-variant="success" w-auto show-empty small stacked="md" id="eventdataTable" striped hover responsive :items="items" :fields="event_columns" :per-page="perPage" :current-page="currentPage" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" :filter="filter" :filterIncludedFields="filterOn" @filtered="onFiltered" >
  <template v-slot:cell(nearby_venues)="row">
    <div>
      <!-- 修改按钮的v-b-modal为唯一ID，同时点击时存储当前行数据 -->
      <b-button variant="info" class="text-center" size="sm" @click="handleOpenModal(row.item)" v-b-modal="`modal-${row.item.api_id}`" >Nearby Venues {{ row.item.api_id }} </b-button>
      
      <!-- 模态框ID改为唯一值，使用currentEventItem展示数据 -->
      <b-modal :id="`modal-${row.item.api_id}`" ok-variant="info" v-model="show1" size="sm" title="Nearby Venues" >
        {{ currentEventItem?.api_id }} *现在应该正常显示当前行数据了*
        <p align="left">Choose Venues close to</p>
        <b-form-select v-model="userdata.eventApiId" class="mb-3" >
          <template slot="first">
            <option :value="currentEventItem?.api_id"> {{ currentEventItem?.api_id }} *现在会显示点击行的api_id* </option>
          </template>
        </b-form-select>
        <label class="mr-sm-3" for="venue-category-selection" ></label>
        <b-form-select class="mb-2 mr-sm-2 mb-sm-0" v-model="userdata.selectedVenueCategory" :options="venue_categories" value-field="id" text-field="name" id="venue-category-selection" size="sm" ></b-form-select>
        <hr width="300" align="left" />
        <div>
          <p align="left">Distance</p>
          <label class="mr-sm-3" for="event-place-selection" ></label>
          <b-form-input v-model="userdata.distance" placeholder="distance" width="5px" ></b-form-input >km.
          <b-button size="sm" variant="success" @click="VenuesFromSelectedEvent" v-b-toggle.collapse-2 > Click Here </b-button>
        </div>
      </b-modal>
    </div>
  </template>
</b-table>

3. 添加点击按钮时的处理方法，在组件的methods里：

methods: {
  // ... 其他已有方法
  handleOpenModal(item) {
    this.currentEventItem = item;
    this.show1 = true;
  }
}

关键改动说明 #

• 模态框ID使用modal-${row.item.api_id}确保每行的模态框都是唯一的，不会被覆盖
• 点击按钮时通过handleOpenModal把当前行数据存入currentEventItem，模态框里所有需要展示当前行数据的地方都使用currentEventItem来获取
• 使用可选链操作符?.避免在currentEventItem未赋值时出现报错

这样修改后，每个按钮点击都会打开对应行的模态框，并且展示当前行的正确数据了。

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