Как получить URL в моем JSON и поместить его в модальное?

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>

Answer 1

Вы должны иметь разные модальные идентификаторы для каждого элемента в 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>

Answer 2

Я бы предложил использовать только один модальный режим и изменять содержимое в зависимости от события клика.это помогает улучшить производительность цикла 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>