如何在我的 JSON 中获取 URL 并将其放入模态？

Question

下图是我的 JSON 结构，它来自 MYSQL 并使用 NodeJS 检索，我现在将它呈现给我的 VueJS。这是我的错误/错误的视频。如您所见，即使我只单击一个，它也会显示每个用户的所有 QR。它给了我表中每个人的 URL我只需要显示每个用户。下面的代码工作正常，直到我将此代码插入我的模式 ":value="result.url" :size="size" level="H">虽然它仍然有效但不是我想要的。<tbody>    <tr v-for="result in filteredPeople" :key="result.id">        <td>{{result.Memb_ID}}</td>        <th>{{result.First_Name}}</th>        <th>{{result.Middle_Name}}</th>        <th>{{result.Last_Name}}</th>        <th>{{result.Address}}</th>        <div class="btn">            <button type="button" class="btn btn-success">Edit Details</button>            <b-button v-b-modal.modal-1 class="btn btn-danger">Show QR</b-button>        </div>        <b-modal id="modal-1" title="QR">            <div class="showQR text-center">                <qrcode-vue :value="result.url" :size="size" level="H"/>            </div>        </b-modal>    </tr></tbody><script>           import axios from "axios";    import QrcodeVue from "qrcode.vue";    export default {                    data() {        return {          search: "",          value: "",          size: 250,          results: {}        };       },     methods: {        getUsers() {          axios            .get("http://localhost:9000/api/users/")            .then(response => (this.results = response.data))            .catch(error => console.log(error));        }      },    computed: {        filteredPeople() {          if (this.search) {            return this.results.filter(result => {              return result.First_Name.startsWith(this.search);            });          } else {            return this.results;          }        }      },      components: {        QrcodeVue      }    };</script>

Answer 1

您应该为每个项目使用不同的模态 ID v-for

<div class="btn">

  <button type="button" class="btn btn-success">Edit Details</button>

  <b-button v-b-modal="'modal-' + result.Memb_ID" class="btn btn-danger">Show QR</b-button>

</div >

<b-modal :id="'modal-' + result.Memb_ID" title="QR">

  <div class="showQR text-center">

    <qrcode-vue : value="result.url" :size="size" level="H"/>

          </div>

</b-modal>