How add a mask component

  • Hi friends,


    I have a problem cuz im new in vuejs and pagekit and i trying add a external component to my form.


    The component is vue-text-mask

    Vue Text Mask


    I have a model/input-phone.vue with code example



    So i call to the component in app/views/admin/my location-index.js


    Code
    1. components: {
    2. 'input-phone': require('../../model/input-phone.vue')
    3. }


    and this is a extract of my location-index.php


    Code
    1. <?= $view->script('location-index' , 'appointments:app/bundle/location-index.js' , 'vue') ?>
    2. <div class="uk-form-row">
    3. <input-phone v-model="location.phone"></input-phone>
    4. </div>


    And my form doesnt show my input-phone component.. Whats wrong?

    [Blocked Image: https://ibb.co/287nCK8]


    Thanks for ur help. btw happy new year!

  • Probably, the component you use is not compatible with Vue Js v1.


    e.g. it has no mounted event: https://v1.vuejs.org/guide/instance.html#Lifecycle-Diagram - and i think there are a bunch of more incompatibilities.

    JavaScript: text-mask/vue/src/vueTextMask.js
    1. mounted() {
    2. this.initMask()
    3. }

    I think this tag is compliant with v1: https://github.com/text-mask/text-mask/tree/vue-v2.1.0/vue

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • Probably, the component you use is not compatible with Vue Js v1.


    e.g. it has no mounted event: https://v1.vuejs.org/guide/instance.html#Lifecycle-Diagram - and i think there are a bunch of more incompatibilities.

    JavaScript: text-mask/vue/src/vueTextMask.js
    1. mounted() {
    2. this.initMask()
    3. }

    I think this tag is compliant with v1: https://github.com/text-mask/text-mask/tree/vue-v2.1.0/vue

    Thanks for ur answer, i'll try this new component