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:
    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



  • @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.


Log in to reply