使用 Bootstrap Vuejs 将 row.item.attribute 值传递给模式

Question

我有一个表格，在最后一列中有一个按钮，按下它会弹出一个模式，其中包含一些信息和要执行的操作。 对于这个模态，我想从表中传递一个值（从每一行的特定单元格），但模态总是显示表最后一行的单元格值（就像它将整个表视为一行）。 为了做一些测试，我写了要出现在按钮标题上的属性，到目前为止它运行良好（对于每个按钮，它显示每行的正确属性）。 似乎在下一个级别（模式内部）存在误解，无论打开哪个模式，它总是呈现最后一行的单元格值。 table modal

 <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>                     
                              <b-button
                                variant="info"
                                class="text-center"
                                size="sm"
                                @click="show1 = true"
                               v-b-modal="'modal1'"                       
                                >Nearby Venues  {{ row.item.api_id }}
                               </b-button>
                              <b-modal                         
                                id="modal1"
                                ok-variant="info"
                                v-model="show1"
                                size="sm"
                                title="Nearby Venues"
                              > {{ row.item.api_id }}  *This appears correct*                                           
                                  <p align="left">Choose Venues close to</p>
                                  <b-form-select
                                  v-model="userdata.eventApiId"
                                    class="mb-3"
                                  >
                                      <template slot="first">
                                      <option :value="row.item.api_id">
                                        {{ row.item.api_id }} *This appears wrong -the value of the column cell from the last row*
                                      </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>                     
                          </table>

Answer 1

这里的问题是这个组件中有一个循环遍历每一行，为每一行渲染一个新的b-modal。问题出在这部分代码中：

```
<b-form-select
      v-model="userdata.eventApiId"
      class="mb-3">
```

每次为新行呈现模式时，它会将userdata.eventApiId 更改为当前行的值。所以userdata.eventApiId 最终将始终是表格最后一行的api_id。

一种解决方案是更改代码，以便在单击按钮时将userdata.eventApiId 更改为row.item.api_id。

我也不建议将模态置于循环中，因为您会创建很多隐藏的模态。我只会在表格之外有一个模式来改变 userdata 的值。