How integrate vue-signature-pad to quasar in cordova/android mode?

facku

Hello everyone, I am making a hybrid app for android with quasar and cordova.

I’m trying to integrate this plugin into quasar, but it gives me an error on my page.

//quasar.config.js:
boot: [
      { path: "axios", server: false },
      { path: "SignaturePad", server: false }
]

//src/boot/SignaturePad.js
import Vue from "vue";
import VueSignaturePad from "vue-signature-pad";

Vue.use(VueSignaturePad);
export default async ({ Vue }) => {
  // something to do
};

And my Firma.vue page code:

<template>
  <q-page class="flex-center">
    <div class="row">
      <div class="col-12 q-py-lg">
        <div class="text-center text-h2">Firmar</div>
      </div>
      <div class="col-12 flex flex-center">
        <VueSignaturePad
          :width="`${$q.screen.width - 20}px`"
          :height="`${$q.screen.height / 2}px`"
          ref="signaturePad"
          class="bg-white"
          style="border:2px solid grey;border-bottom:4px solid grey;border-radius:6px;"
        />
      </div>
    </div>

    <q-page-sticky position="bottom-left" :offset="[18, 18]">
      <q-btn
        round
        outline
        color="red"
        icon="la la-trash"
        size="lg"
        @click="borrarFirma"
      />
    </q-page-sticky>

    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        outline
        round
        icon="la la-check"
        size="lg"
        :color="$refs.signaturePad.isEmpty() ? 'gray' : 'green'"
        :disable="$refs.signaturePad.isEmpty()"
        @click="guardarFirma"
      />
    </q-page-sticky>
  </q-page>
</template>

<script>
import { QSpinnerHourglass } from "quasar";

export default {
  name: "PageFirma",

  methods: {
    borrarFirma() {
      this.$refs.signaturePad.clearSignature();
      this.$q.notify({
        message: "Firma Borrada",
        icon: "la la-info-circle",
        color: "primary",
        timeout: 750,
        position: "center"
      });
    },

    guardarFirma() {
      if (this.$refs.signaturePad.isEmpty()) {
        this.$q.notify({
          title: "Firma Vacia",
          message: "Por favor complete su firma!",
          icon: "la la-warning",
          color: "red",
          timeout: 750,
          position: "center"
        });
      } else {
        this.$q.loading.show({
          delay: 0,
          backgroundColor: "red-6",
          spinnerSize: 120,
          spinner: QSpinnerHourglass,
          message: "POR FAVOR ESPERE"
        });

        const imageBase64 = this.$refs.signaturePad.saveSignature(
          "image/svg+xml"
        ).data;

        this.$axios
          .post("http://192.168.1.36:3000/api/signatureUpload", { imageBase64 })
          .then(resp => {
            this.$q.loading.hide();
          })
          .catch(error => {
            this.$q.loading.hide();
          });
      }
    }
  }
};
</script>

For example the line:

:color="$refs.signaturePad.isEmpty() ? 'gray' : 'green'"

throws me this error:
alt text

The strange thing is that $refs.signaturePad.isEmpty does work within my methods in the <scripts> side, but it does not work inside the html code in the <template> side.

If i quit all reference to $refs.signaturePad in template section the plugins works well, but when i referer to him in template side throws me that error…

what’s going on? Help please

PD: sorry for my google translator english

metalsadman

@facku I implemented that in my codesandbox examples here https://0ybb3.sse.codesandbox.io/form-validations/external-veevalidate, source here https://codesandbox.io/s/quasar-v1-samples-0ybb3. on your case i suggest you use a method or computed property, to validate that check instead of using it in the template, you might also need to call $nextTick before you can refer the $refs of your signature element.