How to get the URL in my JSON and put it in a modal?

Question

below image is my JSON structure that came from MYSQL and retrieve using NodeJS and I'm rendering it to my VueJS as of now.

Here is the video of my error/bug. As you can see, it shows all the QR of each user even though I only click one.

• It gives me the URL for each person in the table
• I only need to show per user.

Below code is working fine until I inserted this code in my modal ":value="result.url" :size="size" level="H"> though it still works but not what I want.

<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

I would suggest to use only one modal and change the content based on a click event. this helps improve performance of the for loop:

<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" @click="updateModalContent(result)">Show QR</b-button>
        </div>
    </tr>
    <b-modal id="modal-1" title="QR">
        <div class="showQR text-center">
            <qrcode-vue :value="selectedResult.url" :size="size" level="H"/>
        </div>
    </b-modal>
</tbody>

<script>       
    export default {
                    data() {
        return {
          search: "",
          value: "",
          size: 250,
          results: {},
          selectedResult: {}
        };
       }, 

    methods: {
        updateModalContent(result) {this.selectedResult = result},
        // Other Methods
      },
    };

</script>

Answer 2

You should have different modal's id for each item in 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>