[Vuejs]-How to get the URL in my JSON and put it in a modal?

by

3👍

✅

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

0👍

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>
👤Patrick Schocke

Leave a comment