在 vue.js 应用程序中将数据传递给模态

Posted 2023-02-23

【中文标题】在 vue.js 应用程序中将数据传递给模态

【英文标题】：pass data to modal in vue.js app

【发布时间】：2018-06-27 18:40:15

【问题描述】：

我在 cli 中创建了一个 vue 应用程序。我有一个 List 组件文件：

<template>
 <div class="container">
 <h1 class="text-center">List member</h1>
 <table class="table table-bordered">
  <thead>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Name</th>
      <th class="text-center">Birthday</th>
      <th class="text-center">Score</th>
      <th class="text-center">Action</th>
    </tr>
   </thead>
  <tbody>
    <tr v-for="person in people">
      <td class="text-center"> person.id </td>
      <td class="text-center"> person.name </td>
      <td class="text-center"> person.birthday </td>
      <td class="text-center"> person.score </td>
      <td class="text-center">
        <b-btn v-b-modal.my-modal>Edit</b-btn>
      </td>
    </tr>
   </tbody>
  </table>

我在这个文件中有模态组件：

    <!-- Modal Component -->
    <b-modal id="my-modal" ref="modal" title="Edit profile" @ok="handleOk" 
       @shown="clearName">
      <form @submit.stop.prevent="handleSubmit">
        <b-form-input type="text"> person.name </b-form-input>
        <br>
        <b-form-input type="text"></b-form-input>
        <br>
        <b-form-input type="text"></b-form-input>
      </form>
    </b-modal>
  </div>
 </div>
</template>

单击“编辑”按钮时，如何将连续（人）的数据传递给模态？ 谢谢

【问题讨论】：

什么是<b-btn v-b-modal.my-modal>Edit</b-btn>？

是 ，我用的是bootstrap vue，所以是​​

所以你展示的两个sn-ps都在同一个.vue文件中？

是的，我把它们放在同一个文件里

【参考方案1】：

我不确定这是否可行，更不确定这是否优雅，但如果它们在同一个文件中，您可以尝试在单击此按钮时将currentPerson 属性设置为person .喜欢

<b-btn @click="currentPerson = person" v-b-modal.my-modal>Edit</b-btn>

然后在模态中使用currentPerson.name。