Implement Jsignature within vuejs component

Question

I'm new to Vue and trying to implement Jsignature within a 'custom' Vuejs component.

My solution is based on: https://v2.vuejs.org/v2/examples/select2.html

It should be straight forward however I don't get it working, the solution I got so far results in the following error:

'Jsignature' is defined but never used
import Jsignature from '../../lib/jsignature

The component containing the signature.

<template>
  <div>
    <app-signature></app-signature>
  </div>
</template>
<script>
  import Signature from './signature/Signature.vue'

  export default {
   components: {
     appSignature: Signature
    }
  }
</script>

The signature component.

<template>
  <div id="signaturecanvas"></div>
</template>
<script>
  import Jsignature from '../../lib/jsignature'

  export default {
    data () {
      return {
        signature: ''
      }
    },
    methods: {
      initial () {
        var element = ('#signaturecanvas')
        element.Jsignature.jSignature()
      }
    },
    created () {
      this.initial()
    }
  }
</script>
<style></style>

Answer 1

Never worked with Jsignature but I suppose you use it as a jquery plugin. The issue you have is right at the this.$signaturecanvas . This is somehow a wrong way to get the div via jQuery.

var element = ("#signaturecanvas") or var element = $(this.$el) if you want to selected the whole component. $el refers to the identifier of the current vue component instance and basically is the first tag from the component. Choose the appropriate way depending on what you want to select and you should get it working.

Answer 2

Instead of importing JQuery and JSignature, I made the choice to use signature pad. https://github.com/szimek/signature_pad

This 'plug-in' is in native javascript/html5 which makes my application less constraint to external libraries like JQuery.