根据单击的按钮为模态输入提供值

Question

我正在使用Vue.js生成表中的项目列表。一切正常。现在，在每一行的结尾，我都有一个按钮。单击按钮时，将打开一个模态。我想将信息从单击按钮的行中放入模态。

因此，表行如下所示： 标题，价格，按钮

当单击该特定行中的按钮时，我想将该行中的标题作为模态中的输入值发送。

我的代码片段：

                    <tbody>
                  <tr v-for="samsung in samsungFilteredList">
                    <td class="text-left">{{ samsung.title }}</td>
                    <td class="text-right">{{ samsung.scherm }}</td>
                    <td class="text-right">{{ samsung.batterij }}</td>
                    <td class="text-right">{{ samsung.camera }}</td>
                    <td class="text-right">{{ samsung.behuizing }}</td>
                    <td class="text-right">{{ samsung.microfoon }}</td>
                    <td class="text-right"><a href="#" data-toggle="modal" data-target="#modal-form"><i class="fa fa-file icon-primary"></i></a></td>
                  </tr>
                </tbody>

              </table>
            </div>

            <div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
              <div class="modal-dialog modal- modal-dialog-centered modal-sm" role="document">
                <div class="modal-content">
                  <div class="modal-body p-0">
                    <div class="card bg-secondary shadow border-0">
                      <div class="card-header bg-white">
                        <div class="text-muted text-center">
                          <small>Stuur ons een bericht</small>
                        </div>
                      </div>
                      <div class="card-body px-lg-5 py-lg-5">
                        <form role="form">
                          <div class="form-group mb-3">
                            <div class="input-group input-group-alternative">
                              <input class="form-control" id="telefoon" name="telefoon" placeholder="Telefoon" type="text" value="Samsung Galaxy S9" readonly>
                            </div>
                          </div>
                          <div class="form-group mb-3">
                            <div class="input-group input-group-alternative">
                              <input class="form-control" id="naam" name="naam" placeholder="Naam" type="text">
                            </div>
                          </div>
                          <div class="form-group">
                            <div class="input-group input-group-alternative">
                              <input class="form-control" id="email" name="email" placeholder="Email" type="email">
                            </div>
                          </div>
                          <div class="text-center">
                            <button type="button" class="btn btn-primary my-4">Verzenden</button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

所以我想发送{{samsung.title}}作为输入的值，其ID和名称为'telefoon'。

我该怎么做？

预先感谢， 迈克

更新（通过反复试验找到解决方案）

                      <tr v-for="samsung in samsungFilteredList">
                    <td class="text-left">{{ samsung.title }}</td>
                    ... etc
                    <td class="text-right">
                        <a href="#" data-toggle="modal" :data-target="'#' + samsung.title"><i class="fa fa-file icon-primary"></i></a>
                        <div class="modal fade" :id="samsung.title" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
                          <div class="modal-dialog modal- modal-dialog-centered modal-sm" role="document">
                            <div class="modal-content">
                              <div class="modal-body p-0">
                                <div class="card bg-secondary shadow border-0">
                                  <div class="card-header bg-white">
                                    <div class="text-muted text-center">
                                      <small>Stuur ons een bericht <span class="d-none">{{ samsung.title }}</span></small>
                                    </div>
                                  </div>
                                  <div class="card-body px-lg-5 py-lg-5">
                                    <form role="form">
                                      <div class="form-group mb-3">
                                        <div class="input-group input-group-alternative">
                                          <input class="form-control" id="telefoon" name="telefoon" placeholder="Telefoon" type="text" :value="samsung.title" readonly>
                                        </div>
                                      </div>
                                      <div class="form-group mb-3">
                                        <div class="input-group input-group-alternative">
                                          <input class="form-control" id="naam" name="naam" placeholder="Naam" type="text">
                                        </div>
                                      </div>
                                      <div class="form-group">
                                        <div class="input-group input-group-alternative">
                                          <input class="form-control" id="email" name="email" placeholder="Email" type="email">
                                        </div>
                                      </div>
                                      <div class="text-center">
                                        <button type="button" class="btn btn-primary my-4">Verzenden</button>
                                      </div>
                                    </form>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                    </td>
                  </tr>