How to use nativescript-drawingpad in Nativescript-Vue?

Question

I am trying to use Brad Martin's nativescript-drawingpad (github repo) in my Nativescript-Vue app. All the examples I can find use Angular for demo purposes and I do not know Angular. I've actually looked for some how-tos for transitioning Angular-to-Vue NS code, but am not finding anything.

I've watched the video and read thru the blog post for insight but I'm green.

Would love to have something akin to what is on this page.

If someone could assist with showing me the transition it would help with this plugin & other Angular-to-Vue NS translations.

Presently I have a working drawing pad that accepts a drawing. But I am not sure how to access the available methods (clearDrawing(), getDrawing(), etc...).

in App.js, it is registered as:

Vue.registerElement('DrawingPad', () => require('nativescript-drawingpad').DrawingPad);

I access this in Home.vue as:

        <GridLayout rows="*,auto" columns="*" backgroundColor="#FFFFFF">
            <StackLayout col="0" row="0" horizontalAlignment="center" verticalAlignment="center" backgroundColor="#FFFFFF">
                <Label text="Sign/Update below" textWrap="true" horizontalAlignment="center" verticalAlignment="center" marginTop="20"></Label>
                <DrawingPad height="150" width="90%" id="drawingPad" ref="drawingPad" penColor="#FF6B6B" penWidth="2" borderColor="black"
                            borderWidth="2">
                </DrawingPad>

            </StackLayout>
            <GridLayout col="0" row="1" rows="auto,*" columns="*,*">
                <Button col="0" row="0" colSpan="2" class="btn" text="Clear Signature" @tap="clearMyDrawing"></Button>


                <Button col="0" colSpan="2" row="1" class="btn btn-primary" text="Done" @tap="onDoneTap"></Button>
            </GridLayout>
        </GridLayout>

My methods are wired-up correctly in that alerts are popped-up appropriately...

methods:  {
            clearMyDrawing(args) {
                alert("So long, and thanks for all the tacos.");

            },
            onDoneTap() {
                alert("Done?????");
            }
        }

I've tried a lot of variations to access these methods, but I'm frankly flailing and do not have any examples worth showing....

This is running on my mac using the nativescript-cli using the "tns run android" command.

Thanks for any assistance.

Answer 1

With UI plugins you would mostly follow the standard instructions from the NativeScript Vue docs and I see you are already doing that.

Consider Core flavor as raw HTML (XML) & CSS, Vue / Angular / React or whatever framework you use, it's just a wrapper around your Core flavor.

With Vue, everything you reference on template will be wrapped by Vue element, you will have to access the nativeView attribute to get the actual element then access any methods inside.

Example:

 clearMyDrawing(args) {
    this.$refs.drawingPad.nativeView.clearDrawing();
 },