javascript - 如何获取 JSON 中的 URL 并将其放入模式中？

Question

下图是我的 JSON 结构，它来自 MYSQL 并使用 NodeJS 进行检索，目前我正在将其渲染到我的 VueJS 中。

这是video我的错误/错误。正如你所看到的，它显示了每个用户的所有二维码，即使我只点击了一个。

• 它为我提供了表中每个人的 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

您应该为 v-for 中的每个项目拥有不同的模态 ID

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