How add a mask component

anthonysaurina · Jan 2nd 2019

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

Code

<template>
<div>
<label>Phone Number</label>
<masked-input type="text" name="phone" class="uk-width-1-1" v-model="phone" :mask="['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]" :guide="false" placeholderChar="#">
</masked-input>
</div>
</template>
<script>
import MaskedInput from 'vue-text-mask'
export default {
name: 'name',
components: {
MaskedInput
},
data () {
return {
phone: ''
}
}
}
</script>

Display More

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

Code

components: {
'input-phone': require('../../model/input-phone.vue')
}

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

Code

<?= $view->script('location-index' , 'appointments:app/bundle/location-index.js' , 'vue') ?>
<div class="uk-form-row">
<input-phone v-model="location.phone"></input-phone>
</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!

SAB · Jan 3rd 2019

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

mounted() {
this.initMask()
}

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

anthonysaurina · Jan 3rd 2019

Quote from SAB

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

mounted() {

this.initMask()

}

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

Share