Initialise canvas for every Vue.JS template loop

Question

I'm stuck trying to work out how to initialize a local "signaturePad" canvas for every loop / signature required.

I'm also keen to bind "dataURL" to signaturePad.toDataURL("image/jpg"). I.e. show the dataURI for each signature entered.

Hope you can help! Here's the JSfiddle too: https://jsfiddle.net/kaihendry/kt53sa2r/1/

// var canvas = document.querySelector("canvas");
// var signaturePad = new SignaturePad(canvas);
// var wrapper = document.getElementById("signature-pad");

// How do I initialise signaturePad for every signatureNeeded?

new Vue({
  el: "#app",
  data: {
    signaturesNeeded: 2,
  },
  methods: {
    submitForm: function(x) {
      fetch('/echo/html', {
          method: 'POST',
          body: new FormData(x.target)
        })
        .then(() => {
          var button = document.getElementById("button")
          button.innerText = 'Sent!'
        })
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<div id="app">
  <label>Number of signatures required
<input type=number v-model.number="signaturesNeeded">
</label>
  <form id="myForm" v-on:submit.prevent="submitForm">
    <template v-for="item in signaturesNeeded">
    
<div class="signature-pad">
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
</div>
    
<input required type=text size=80 placeholder="Name" name=name>
<input required type=text size=80 name=dataURL>

</template>

    <button class="button" id="button" type="submit">Sign</button>
  </form>
  <a href="https://github.com/szimek/signature_pad">Signature pad sources</a>
</div>

score 1 · Answer 1 · answered Jul 30 '18 at 08:30

You can define custom component (signature-pad for example) and initialize SignaturePad there. I created working snippet below. It also update signature data url when user stops writing(it shows below the canvas) and as example all urls are collected by parent component. Check it:

Vue.component('signature-pad', {
    template: '#signaturepad',
    data() {
        return {
            signaturePad: null,
            dataUrl: null
        }
    },
    mounted() {
        this.signaturePad = new SignaturePad(this.$refs.canv, {
           onEnd: () => { 
               this.dataUrl = this.signaturePad.toDataURL();
               // as example collect all url in parent
               this.$emit('update', this.dataUrl)
           }
        });
    }
});

new Vue({
  el: "#app",
     data: {
    signaturesNeeded: 2,
    // all signature urls as example
    signatureDataUris: []
  },
      methods: {
    submitForm: function (x) {
        fetch('/echo/html', { method: 'POST',
            body: new FormData(x.target) })
        .then(() => {
            var button = document.getElementById("button")
            button.innerText = 'Sent!'
        })
    },
    
    updateSignature(index, url) {
       Vue.set(this.signatureDataUris, index, url);
       console.log(this.signatureDataUris);
    }
    }
})

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <label>Number of signatures required
<input type=number v-model.number="signaturesNeeded">
</label>
  <form id="myForm" v-on:submit.prevent="submitForm">
    <template v-for="item in signaturesNeeded">
    
<signature-pad @update="(val) => updateSignature(item-1, val)" ></signature-pad>

<input required type=text size=80 placeholder="Name" name=name>
</template>
    <button class="button" id="button" type="submit">Sign</button>
  </form>
  <a href="https://github.com/szimek/signature_pad">Signature pad sources</a>
</div>


<script type='text/x-template' id="signaturepad">
 <div class="signature-pad">
    <div class="signature-pad--body">
     <canvas ref="canv"></canvas>
      <div>{{dataUrl}}</div>
    </div>
    <div class="signature-pad--footer">
     <div class="description">Sign above</div>
   </div>
</div>
</script>

Initialise canvas for every Vue.JS template loop

1 Answers1