Question

下面的图像是我的JSON结构，它来自MYSQL，并使用NodeJS进行检索，到目前为止，我正在将其呈现到VueJS中。

这是我的错误/错误的video。如您所见，即使我只单击一个，它也会显示每个用户的所有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>

如何在JSON中获取URL并将其置于模式中？

2 个答案: