How integrate vue-signature-pad to quasar in cordova/android mode?
-
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:
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
-
@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.