Usage with NativeScript-Vue

sougiovn commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

gab0gomes commented 5 years ago

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

gab0gomes commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

kfvit-andreaskviby commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

Jonarod commented 5 years ago

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

kfvit-andreaskviby commented 5 years ago

Same for me, it does not show up

Från: Jonarod notifications@github.com Svara till: PeterStaev/nativescript-masked-text-field reply@reply.github.com Datum: fredag 31 maj 2019 09:35 Till: PeterStaev/nativescript-masked-text-field nativescript-masked-text-field@noreply.github.com Kopia: Andreas Kviby Andreas.Kviby@dialect.se, Mention mention@noreply.github.com Ä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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@Jonarod Thanks that helped once again.

andresilva-cc commented 5 years ago

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 commented 4 years ago

How to add v-model to this.

andresilva-cc commented 4 years ago

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

keithgulbro commented 4 years ago

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 commented 3 years ago

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'

PeterStaev / nativescript-masked-text-field

Usage with NativeScript-Vue #29