Usage with NativeScript-Vue #29

sougiovn · 2018-11-08T22:34:58Z

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>

The text was updated successfully, but these errors were encountered:

PeterStaev · 2018-11-09T12:42:52Z

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 · 2018-11-14T16:07:45Z

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 · 2018-11-14T21:46:45Z

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

gab0gomes · 2018-11-14T21:50:24Z

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

gab0gomes · 2018-11-14T22:10:38Z

@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 · 2019-01-23T18:48:27Z

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 · 2019-02-22T12:02:29Z

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 · 2019-02-25T09:12:48Z

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

kfvit-andreaskviby · 2019-02-25T12:14:21Z

@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 · 2019-02-25T12:25:24Z

@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 · 2019-02-25T12:27:25Z

@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 · 2019-02-25T12:51:46Z

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 · 2019-02-25T12:52:40Z

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 · 2019-02-25T15:10:46Z

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 · 2019-05-16T04:43:25Z

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 · 2019-05-28T18:46:06Z

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

Jonarod · 2019-05-31T07:35:04Z

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

kfvit-andreaskviby · 2019-05-31T07:43:29Z

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 GitHub<#29?email_source=notifications&email_token=ALIN32VOAW7NSTIXGTXX3STPYDIKTA5CNFSM4GCWOX62YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWUOL3Q#issuecomment-497608174>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ALIN32SJ3DF7QS3MBU6LUB3PYDIKTANCNFSM4GCWOX6Q>.

bundyo · 2019-05-31T11:49:18Z

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 · 2019-05-31T12:40:05Z

@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 · 2019-05-31T12:54:30Z

@Jonarod Thanks that helped once again.

andresilva-cc · 2019-08-26T02:01:28Z

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 · 2019-09-24T05:45:03Z

How to add v-model to this.

andresilva-cc · 2019-10-03T19:50:33Z

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

keithgulbro · 2020-02-04T20:36:52Z

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 · 2021-01-02T18:38:44Z

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 added help wanted question labels Nov 9, 2018

PeterStaev mentioned this issue Jan 13, 2019

Vue Support PeterStaev/NativeScript-Grid-View#50

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Usage with NativeScript-Vue #29

Usage with NativeScript-Vue #29

sougiovn commented Nov 8, 2018

PeterStaev commented Nov 9, 2018

gab0gomes commented Nov 14, 2018

sougiovn commented Nov 14, 2018

gab0gomes commented Nov 14, 2018

gab0gomes commented Nov 14, 2018

lennonphosfato commented Jan 23, 2019

kfvit-andreaskviby commented Feb 22, 2019

PeterStaev commented Feb 25, 2019

kfvit-andreaskviby commented Feb 25, 2019

PeterStaev commented Feb 25, 2019

kfvit-andreaskviby commented Feb 25, 2019

PeterStaev commented Feb 25, 2019 •

edited

Loading

kfvit-andreaskviby commented Feb 25, 2019

prinzt commented Feb 25, 2019

budi7 commented May 16, 2019 •

edited

Loading

seergiue commented May 28, 2019

Jonarod commented May 31, 2019

kfvit-andreaskviby commented May 31, 2019 via email

bundyo commented May 31, 2019 •

edited

Loading

Jonarod commented May 31, 2019

MohammedBashiru commented May 31, 2019

andresilva-cc commented Aug 26, 2019 •

edited

Loading

Nayeb-karimi commented Sep 24, 2019

andresilva-cc commented Oct 3, 2019

keithgulbro commented Feb 4, 2020 •

edited

Loading

Dartow commented Jan 2, 2021

Usage with NativeScript-Vue #29

Usage with NativeScript-Vue #29

Comments

sougiovn commented Nov 8, 2018

PeterStaev commented Nov 9, 2018

gab0gomes commented Nov 14, 2018

sougiovn commented Nov 14, 2018

gab0gomes commented Nov 14, 2018

gab0gomes commented Nov 14, 2018

lennonphosfato commented Jan 23, 2019

kfvit-andreaskviby commented Feb 22, 2019

PeterStaev commented Feb 25, 2019

kfvit-andreaskviby commented Feb 25, 2019

PeterStaev commented Feb 25, 2019

kfvit-andreaskviby commented Feb 25, 2019

PeterStaev commented Feb 25, 2019 • edited Loading

kfvit-andreaskviby commented Feb 25, 2019

prinzt commented Feb 25, 2019

budi7 commented May 16, 2019 • edited Loading

seergiue commented May 28, 2019

Jonarod commented May 31, 2019

kfvit-andreaskviby commented May 31, 2019 via email

bundyo commented May 31, 2019 • edited Loading

Jonarod commented May 31, 2019

MohammedBashiru commented May 31, 2019

andresilva-cc commented Aug 26, 2019 • edited Loading

Nayeb-karimi commented Sep 24, 2019

andresilva-cc commented Oct 3, 2019

keithgulbro commented Feb 4, 2020 • edited Loading

Dartow commented Jan 2, 2021

PeterStaev commented Feb 25, 2019 •

edited

Loading

budi7 commented May 16, 2019 •

edited

Loading

bundyo commented May 31, 2019 •

edited

Loading

andresilva-cc commented Aug 26, 2019 •

edited

Loading

keithgulbro commented Feb 4, 2020 •

edited

Loading