Unknown custom element: <vuephonenumberinput>

[louismazel]

Unknown custom element:

from vue-phone-number-input.

[evansbusobozi]

Thanks @nperegrine , Your solution worked for me.

[nperegrine]

Hi @Evanzsnr

If I understand what you're asking properly, here's how I got the data as displayed in the demo:

I used the @update event to call a method updatePhoneNumber and used the emitted event to get the data I wanted.

 <vue-phone-number-input
            v-model="phone"
            :required="true"
            default-country-code="CM"
            @update="updatePhoneNumber"
          />

Below's my @updatePhoneNumber method I used to get the data from the emitted event:

  /**
     * Update phone number
     */
    updatePhoneNumber(data) {
      this.formatted_number = data.formattedNumber
      this.national_number = data.nationalNumber
    }

You can use the data object to get whatever prop you desired as shown in the demo.

Hope this helps 😀

[LouisMazel]

Hi,

Can you show me your code ?

Thanks

[evansbusobozi]

Hello, First I installed using npm, then imported the plugin in app.js as shown below import VuePhoneNumberInput from 'vue-phone-number-input'; Vue.component('vue-phone-number-input', VuePhoneNumberInput); Next I also imported it in app.css as shown below @import 'node_modules/vue-phone-number-input/dist/vue-phone-number-input'; Then I added the input component in my form <div class="field"> <label for="photo" class="label">Profile Picture </label> <input type="file" name="photo" class= "file-label"> @if ($errors->has('photo')) <span class="help-block"> <p class="help is-danger"><strong>{{ $errors->first('photo') }}</strong></p> </span> @endif </div> <div class="field"> <label for="notes" class="label">Notes</label> <b-input name="notes" maxlength="200" type= "textarea" value="{{ old('notes') }}"></b-input> @if ($errors->has('notes')) <span class="help-block"> <p class="help is-danger"><strong>{{ $errors->first('notes') }}</strong></p> </span> @endif </div> <VuePhoneNumberInput v-model="phone_number" /> <div class="field" style="margin-top: 10px;"> <b-button size="is-normal" class= "is-link is-outlined is-fullwidth" icon-left="account-check-outline" native-type="submit"> Save Client </b-button> </div> On the page where I have the form, I have a vue instance since I have other vue components working well, but when I load my page after adding the phone number component, I get the error saying the component is not known.

…

On Thu, Oct 3, 2019 at 8:24 PM Mazel ***@***.***> wrote: Hi, Can you show me your code ? Thanks — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#35?email_source=notifications&email_token=AGLKXGHAEPF5CYROUML7NYTQMYTFDA5CNFSM4I5FQ7JKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAI6FOI#issuecomment-538043065>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGLKXGGKRVAHAXBUOOVMH7LQMYTFDANCNFSM4I5FQ7JA> .

[nperegrine]

Hey, @Evanzsnr Ran into this same issue.

Not sure exactly why, but when I changed the component name inside my vue.js files from:

<VuePhoneNumberInput />

to:

<vue-phone-number-input />

it works, hope this might help :)

[evansbusobozi]

Hello, How do I access the object that contains the data as displayed in the demo? Thanks

…

On Fri, Oct 4, 2019 at 8:35 PM Nkwain Peregrine ***@***.***> wrote: Hey, @Evanzsnr <https://github.com/Evanzsnr> Ran into this same issue. Not sure exactly why, but when I changed the component name inside my vue.js files from: <VuePhoneNumberInput /> to: <vue-phone-number-input /> it works, hope this might help :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#35?email_source=notifications&email_token=AGLKXGB5D6KCZEWN25JOFTLQM55HRA5CNFSM4I5FQ7JKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAMLZKY#issuecomment-538492075>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGLKXGGHRNQKODFMT3VG223QM55HRANCNFSM4I5FQ7JA> .

[evansbusobozi]

Thank you so much, it works perfectly.

…

On Mon, Oct 7, 2019 at 2:25 PM Nkwain Peregrine ***@***.***> wrote: Hi @Evanzsnr <https://github.com/Evanzsnr> If I understand what you're asking properly, here's how I got the data as displayed in the demo: I used the @update event to call a method updatePhoneNumber and used the emitted event to get the data I wanted. <vue-phone-number-input v-model="phone" :required="true" default-country-code="CM" @update="updatePhoneNumber" /> Below's my @updatePhoneNumber method I used to get the data from the emitted event: /** * Update phone number */ updatePhoneNumber(data) { this.formatted_number = data.formattedNumber this.national_number = data.nationalNumber } You can use the data object to get whatever prop you desired as shown in the demo. Hope this helps 😀 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#35?email_source=notifications&email_token=AGLKXGDVKKK6W4T2VLSUVE3QNMMBDA5CNFSM4I5FQ7JKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAP6PAA#issuecomment-538961792>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGLKXGDORSSQLHKOYZI7DVTQNMMBDANCNFSM4I5FQ7JA> .

[evansbusobozi]

Hello, I have another question, how can I set the value for the phone number as the formatted number? I am failing to bind the data.formattedNumber to the v-model value. Thanks

…

On Mon, Oct 7, 2019 at 2:43 PM Evans Busobozi ***@***.***> wrote: Thank you so much, it works perfectly. On Mon, Oct 7, 2019 at 2:25 PM Nkwain Peregrine ***@***.***> wrote: > Hi @Evanzsnr <https://github.com/Evanzsnr> > > If I understand what you're asking properly, here's how I got the data as > displayed in the demo: > > I used the @update event to call a method updatePhoneNumber and used the > emitted event to get the data I wanted. > > <vue-phone-number-input > > v-model="phone" > > :required="true" > > default-country-code="CM" > > @update="updatePhoneNumber" > > /> > > > Below's my @updatePhoneNumber method I used to get the data from the > emitted event: > > /** > > * Update phone number > > */ > > updatePhoneNumber(data) { > > this.formatted_number = data.formattedNumber > > this.national_number = data.nationalNumber > > } > > > You can use the data object to get whatever prop you desired as shown in > the demo. > > Hope this helps 😀 > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#35?email_source=notifications&email_token=AGLKXGDVKKK6W4T2VLSUVE3QNMMBDA5CNFSM4I5FQ7JKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAP6PAA#issuecomment-538961792>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AGLKXGDORSSQLHKOYZI7DVTQNMMBDANCNFSM4I5FQ7JA> > . >