Usage with NativeScript-Vue

[sougiovn]

I'm new to NativeScript and I'm starting with Vue, how do I use it with NativeScript-Vue?

I tested like this, but got no result

<template>
  <Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:mtf="nativescript-masked-text-field">
    <mtf:MaskedTextField v-model="cpf" />
  </Page>
</template>

[PeterStaev]

Hey @gigioSouza , sadly I'm not a Vue developer so i cannot help you on this. I think best to ask on SO so you can get more audience and an appropriate answer.

[gab0gomes]

Hi,

you need to register the component in your main.js file

Vue.registerElement('MaskedTextField',
    () => require('nativescript-masked-text-field').MaskedTextField
);

then, use in your vue component

<MaskedTextField
    v-model="cpf"
    mask="999.999.999-99"
    keyboardType="phone"
/>

[sougiovn]

@Gabrielr2508 It "worked", the app compiled and I'm able to use the MaskedTextField tag/component, but the mask isn't applied.

[gab0gomes]

@gigioSouza The mask works here, but v-model doesn't. Can't figure out why not. :(

[gab0gomes]

@gigioSouza The mask works here, but v-model doesn't. Can't figure out why not. :(

I tried to bind the "text" property of the field and update it in the textchange event, but this caused me to not be able to change the text in the emulator

[lennonphosfato]

I was able to get the value using a refs property and in function it retrieves the value this way $ refs.refName.nativeView.text

[kfvit-andreaskviby]

Hey When I try to use this component in my NativeScript Vue app I get the error

JS ERROR TypeError: Could not load view for: maskedtextfield. TypeError: view_1.CSSType is not a function. (In 'view_1.CSSType("MaskedTextField")', 'view_1.CSSType' is undefined)

I have registered the component using

Vue.registerElement('MaskedTextField',
    () => require('nativescript-masked-text-field').MaskedTextField
);

Then I just add it to the page and when I do I get the error.

<MaskedTextField
                                        v-model="email"
                                        mask="999.999.999-99"
                                        keyboardType="phone"
                                />

I am super new to Vue and Nativescript som I have no idea what I do wrong.

[PeterStaev]

@andreaskvibydialect , make sure you are using Nativescript 4 or later. The CSSType was added relatively recent 😃

[kfvit-andreaskviby]

@andreaskvibydialect , make sure you are using Nativescript 4 or later. The CSSType was added relatively recent 😃

Hey Sorry for being a novice but do you mean tns-core-modules?

[PeterStaev]

@andreaskvibydialect , make sure you are using Nativescript 4 or later. The CSSType was added relatively recent 😃

Hey Sorry for being a novice but do you mean tns-core-modules?

That is correct.

[kfvit-andreaskviby]

@andreaskvibydialect , make sure you are using Nativescript 4 or later. The CSSType was added relatively recent 😃

Hey Sorry for being a novice but do you mean tns-core-modules?

That is correct.

Hey I have version 5.2.0 when I run tns --version now and still I can't make it work in my app. Any other ideas of my registration is wrong of if it has to be locally referenced or in some way.

[PeterStaev]

I have version 5.2.0 when I run tns --version now and still I can't make it work in my app. Any other ideas of my registration is wrong of if it has to be locally referenced or in some way.

Sadly I'm not a Vue developer so can't help much with the registration and other Vue stuff...

[kfvit-andreaskviby]

I have version 5.2.0 when I run tns --version now and still I can't make it work in my app. Any other ideas of my registration is wrong of if it has to be locally referenced or in some way.

Sadly I'm not a Vue developer so can't help much with the registration and other Vue stuff...

I understand, me neither but if you hear or see some NativeScript-Vue App that makes it possible to get this component to work please let me know.

[prinzt]

Hey When I try to use this component in my NativeScript Vue app I get the error

JS ERROR TypeError: Could not load view for: maskedtextfield. TypeError: view_1.CSSType is not a function. (In 'view_1.CSSType("MaskedTextField")', 'view_1.CSSType' is undefined)

I have registered the component using

Vue.registerElement('MaskedTextField',
    () => require('nativescript-masked-text-field').MaskedTextField
);

Then I just add it to the page and when I do I get the error.

<MaskedTextField
                                        v-model="email"
                                        mask="999.999.999-99"
                                        keyboardType="phone"
                                />

I am super new to Vue and Nativescript som I have no idea what I do wrong.

Try the following: Remove the "platforms" folder and start "tns run ..." again.

I just tried the package and it worked.

[budi7]

I have version 5.2.0 when I run tns --version now and still I can't make it work in my app. Any other ideas of my registration is wrong of if it has to be locally referenced or in some way.

Sadly I'm not a Vue developer so can't help much with the registration and other Vue stuff...

I understand, me neither but if you hear or see some NativeScript-Vue App that makes it possible to get this component to work please let me know.

hei i got this plugin working on vue nativescript

this on my main.js Vue.registerElement('MaskedTextField', () => require('nativescript-masked-text-field').MaskedTextField)

this on my component page <MaskedTextField mask="999.999.999" keyboardType="phone" />

and who still use ns-vue 1.3.1 version, u should to edit your package.json "tns-core-modules": "~4.0.0", // i changed to v 4.0.0, previously its 3.*.*

then run npm run clean do npm install --save

finally npm run watch:android or ios and it should work

hope that helps :)

[seergiue]

v-model doesn't seem to work, anyone with same behaviour and how to fix it?

[Jonarod]

The textfield is not even showing up for me (tns 5.3.4)...

[kfvit-andreaskviby]

Same for me, it does not show up

Från: Jonarod [email protected] Svara till: PeterStaev/nativescript-masked-text-field [email protected] Datum: fredag 31 maj 2019 09:35 Till: PeterStaev/nativescript-masked-text-field [email protected] Kopia: Andreas Kviby [email protected], Mention [email protected] Ämne: Re: [PeterStaev/nativescript-masked-text-field] Usage with NativeScript-Vue (#29)

The textfield is not even showing up for me (tns 5.3.4)...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/PeterStaev/nativescript-masked-text-field/issues/29?email_source=notifications&email_token=ALIN32VOAW7NSTIXGTXX3STPYDIKTA5CNFSM4GCWOX62YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWUOL3Q#issuecomment-497608174, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ALIN32SJ3DF7QS3MBU6LUB3PYDIKTANCNFSM4GCWOX6Q.

[bundyo]

In order for v-model to work, you will need to specify which property/event to use, like this:

Vue.registerElement(
    'MaskedTextField',
    () => require('nativescript-masked-text-field').MaskedTextField,
    {
        model: {
            prop: 'text',
            event: 'textChange'
        }
    }
);

Check this example:

https://play.nativescript.org/?template=play-vue&id=3Rac7h&v=3

[Jonarod]

@bundyo helped me out from th slack forum. Now it works. However, I found the origin of the plugin not showing was because I was actually registering the component twice: once like suggested by @bundyo :

Vue.registerElement(
    'MaskedTextField',
    () => require('nativescript-masked-text-field').MaskedTextField,
    {
        model: {
            prop: 'text',
            event: 'textChange'
        }
    }
);

but then also in my component.vue: DON'T DO THIS

<template>
    <MaskedTextField mask="99/99" v-model="expiryDate" />
</template>

<script>
import {MaskedTextField} from "nativescript-masked-text-field"  // REMOVE THIS

export default {
    components: {MaskedTextField}, // REMOVE THIS
    data(){
        return {
            expiryDate: ''
        }
    }
}
</script>

[MohammedBashiru]

@Jonarod Thanks that helped once again.

[andresilva-cc]

Even with @bundyo answer it is still not working for me. Binding text property doesn't return anything in data. When I use with v-model it binds a whole object (not just the value) but I can't type in the field (tried with both virtual and physical keyboard).

[Nayeb-karimi]

How to add v-model to this.

[andresilva-cc]

I ended up using ref and obtaining the value through this.$refs.refName.nativeView.text, as suggested by @lennonphosfato

[keithgulbro]

I ended up using the following code snippet to workaround the v-model issue:

<MaskedTextField
      mask="(999) 999-9999"
      keyboardType="phone"
      ref="maskedtextfield"
      @textChange="textFieldChange($event)"
    />

data() {
    return {
        val: null
    }
},
methods:{
    textFieldChange(args) {
      this.val = args.value;
    }
}

Hopefully this helps!

[Dartow]

Hi,

I am getting this error when trying to load the app with MaskedTextField. Did the same as suggested by @bundyo.

TypeError: Class constructor TextField cannot be invoked without 'new'