No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    2
    477
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      facku last edited by 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 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @facku last edited by 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.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post