javascript - 如何在我的 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>

标签： javascriptjsonvue.jsvuejs2

Answer 1

您应该为每个项目有不同的模态IDv-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>