QR 扫描器不显示在弹出的对话框中

Question

使用 vue.js 和 element-ui html，我有一个记录表，点击该行后，应该会弹出一个二维码扫描器对话框。现在，单击表格中的一行时确实会弹出对话框，但不会出现 QR 扫描仪。我尝试了很多方法，但它似乎仍然不起作用。希望有人可以就此给我建议。谢谢。

{% load static %}

{% block mainbody %}

{% verbatim %}


<div id="app2" class="container">
  <div class="emr-table">
    <el-table :data="list" @row-click="showQRScanner">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="order_id" label="Order ID"></el-table-column>
      <el-table-column prop="ward_number" label="Ward Number"></el-table-column>
    </el-table>
    <el-dialog :visible.sync="qrDialogVisible">
      <div id="qr-scanner-container" ref="scannerContainer"></div>
      <div slot="footer">
        <el-button @click="qrDialogVisible = false">Cancel</el-button>
      </div>
    </el-dialog>
  </div>
</div>


{% endverbatim %}


<script src="{% static 'js/vue.min.js' %}"></script>
<script src="{% static 'js/axios.min.js' %}"></script>
<script src="{% static 'js/qr-scanner.min.js' %}"></script>
<script src="{% static 'js/qr-scanner-worker.min.js' %}"></script>

<script>

  new Vue({
    el: '#app2',
    data() {
      return {
        list: [],
        qrDialogVisible: false,
        selectedRow: null
      }
    },

    mounted() {
      this.getemrList()
    },

    methods: {
      getemrList() {
        // Obtain EMR list
        axios.post(ToDJ('emrList'), new URLSearchParams()).then(res => {
          if (res.data.code === 0) {
            console.log(res.data.data)
            this.list = res.data.data
          } else {
            this.NotifyFail(res.data.data)
          }
        })
      },

      showQRScanner(row) {
        this.selectedRow = row;
        this.qrDialogVisible = true;
        this.initQRScanner()
      },

      initQRScanner() {
        // Initialize the QR scanner in the dialog box
        QrScanner.WORKER_PATH = '../static/js/qr-scanner-worker.min.js'
        const scanner = new QrScanner(document.getElementById('qr-scanner-container'));
        scanner.start();
        scanner.addListener('scan', (result) => {
          this.postQRCode(result)
        });
      },

      postQRCode(qrCode) {
        // Make an AJAX call to the server to post the QR code along
        // with the corresponding row selected in the table
        // to the medicineRequestSelect function
        const selectedRow = this.selectedRow; // Get the selected row data
        axios.post('/medicineRequestSelect', {
          qr_code: qrCode,
          row_data: selectedRow
        })
          .then(response => {
            console.log(response.data)
          })
          .catch(error => {
            console.log(error)
          })
      }

    }
  })

</script>


{% endblock %}

这就是我得到的：