Рендеринг QR-кода из идентификатора элемента, используя отдельный вид и файл компонента - PullRequest
Новая
       4

Рендеринг QR-кода из идентификатора элемента, используя отдельный вид и файл компонента

1 голос
/ 16 октября 2019

У меня есть файл просмотра и компонент QR. Мне нужно отобразить QR-код в моем компоненте на основе идентификатора, который я передаю из родительского представления.

Шаблон Scan.vue: 

<template>
  <div p-0 m-0>
    <div class="scanBreadcrumbs">
      <h2 v-show="path">{{ path.join("/") }}</h2>
      <h2 v-if="path.length === 0">Show location</h2>
    </div>
    <div>
      <div v-for="item in items" :key="item.id">
        <div v-if="item.HasChildren === true">
          <div class="locationBox" @click="swapComponent(item)">
            {{ item.Name }}
          </div>
        </div>
        <div v-else>
          <v-expansion-panel>
            <v-expansion-panel-content>
              <template v-slot:header>
                <div>{{ item.Name }}</div>
              </template>
              <v-card>
                <QR :value="item.Id"></QR>
              </v-card>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </div>
      </div>
      <div v-if="path.length > 0">
        <div class="backButton">
          <v-icon @click="swapPrevious()" class="arrow">fa-arrow-left</v-icon>
        </div>
      </div>
    </div>
  </div>
</template>

Компонент QR.vue: 

<template>
  <div>
    <canvas ref="barcode"></canvas>
  </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  name: "QR",
  props: {
    value: {
      type: String,
      required: true
    }
  },

  methods: {
    async render() {
      console.log("barcode");
      try {
        await QRCode.toCanvas(this.$refs.barcode, this.value, {
          errorCorrectionLevel: "H",
          width: 300,
          value() {
            this.render();
          }
        });
      } catch (e) {
        console.error(e);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

QR-код не отображается, и я не знаю почему. Странно то, что я могу отобразить его, используя диалог с Vuetify, но если я хочу отобразить его на панели расширения, ничего не появляется.

...