如何在JSON中獲取URL並將其置於模式中？

Question

下圖是我的JSON結構，它來自MYSQL，並使用NodeJS進行檢索，到目前為止，我正在將其渲染到我的VueJS中。

這是我的錯誤/錯誤的視頻 。 如您所見，即使我只單擊一個，它也會顯示每個用戶的所有QR。

• 它為我提供了表格中每個人的網址
• 我只需要按用戶顯示。

下面的代碼可以正常工作，直到我將此代碼插入我的模式“：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>

Answer 2

我建議僅使用一種模式，並根據click事件更改內容。 這有助於提高for循環的性能：

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