From cd0aeb899834b539ee1b3eb6146f55a388ca0e89 Mon Sep 17 00:00:00 2001
From: Victor Winberg <victor.m.winberg@gmail.com>
Date: Tue, 5 Apr 2022 08:43:34 +0200
Subject: [PATCH] Add vue-ref to qrscan (#341)

---
 client/src/components/QRScanner.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/QRScanner.vue b/client/src/components/QRScanner.vue
index adda63d0..ad4f1ac2 100644
--- a/client/src/components/QRScanner.vue
+++ b/client/src/components/QRScanner.vue
@@ -9,7 +9,7 @@
         <i v-else class="far fa-bolt"></i>
       </div>
     </div>
-    <div class="qrscan"><video id="qrscan"></video></div>
+    <div class="qrscan"><video id="qrscan" ref="qrscan"></video></div>
   </div>
 </template>
 
@@ -66,10 +66,11 @@ export default Vue.extend({
       const devices = await navigator.mediaDevices.enumerateDevices();
       const cameras = devices.filter(device => device.kind === "videoinput");
       const camera = cameras[cameras.length - 1];
-      if (!camera) return;
+      const { qrscan } = this.$refs;
+      if (!camera || !qrscan) return;
 
       this.scanner = new QRScanner(
-        document.getElementById("qrscan"),
+        qrscan,
         qrcode => {
           if (qrcode) {
             this.handleQR(qrcode);