Блог

У меня есть таблица, где в последнем столбце есть кнопка, при нажатии на которую появляется модал с некоторой информацией и действиями, которые нужно выполнить. В этот модальный файл я хочу передать значение из таблицы (из определенной ячейки каждой строки), но модальный всегда показывает значение ячейки из последней строки таблицы (это похоже на то, что он рассматривает всю таблицу как одну строку). Чтобы выполнить некоторый тест, я написал атрибут, который должен отображаться в заголовке кнопки, и пока он работает хорошо (для каждой кнопки отображается правильный атрибут каждой строки). Похоже, что на следующем уровне (внутри модального) возникает недопонимание, и какой бы модальный режим ни открывался, он всегда представляет значение ячейки последней строки. таблица
модальная

  <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>
 

Проблема здесь в том, что в этом компоненте есть цикл, проходящий через каждую строку, отображающий новую 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.