Change placeholder "Enter your phone number"?

[VIMHaos]

Hi, thanks for your plugin,)
Would be fine to add placeholder and label props for choise, like as https://vuetifyjs.com/ru/components/text-fields

[ATselikovSnp]

you can just write <vue-tel-input v-model="phone" placeholder="12 123 45 67"></vue-tel-input>

[iamstevendao]

Thanks, @ATselikovSnp

[VIMHaos]

Thanks, @ATselikovSnp
You have right, in new plugin version we can change placeholder, I uses old version 1.3.9,
but in new version 2.0 not uses keyboard filter, how it's do that in old version

[iamstevendao]

@VIMHaos what is the "keyboard filter" you are talking about? would you like to give me more details?

[VIMHaos]

Hi, @iamstevendao
Try input text to field not number, in old version this blocked

[iamstevendao]

@VIMHaos, hmm it's a good one! do you want to create a new issue for it?

[fbtwitter]

I still had this error problem, using props placeholder is not working for me..

anyway how to use inputOptions.placeholder in my component ?

Thank you

[iamstevendao]

@fbtwitter Can you reproduce it anywhere?

[fbtwitter]

@iamstevendao , I kinda confusing with the newer version 5.02 here, while my repositories that i use before with the version of ^2.

I'm curious how the reproduce json data like this site look like
https://educationlink.github.io/vue-tel-input/

I already open that codesandbox file https://codesandbox.io/s/0yyyk45q7w?fontsize=14&module=%2Fsrc%2FApp.vue&moduleview=1 but these still a bit hard to me to implement the newer version, since i don't know how to use it correctly.

thanks

[fbtwitter]

I still had this problem, where the placholder props won't running reactive as well.. until i tried to refresh the page.
those newer version are great.. hopefully the documentation for trying the new version updated sooner..

[iamstevendao]

@fbtwitter it should be working on v5.0.3

[constagorgan]

Hi @iamstevendao,

I bumped into the same issue as @fbtwitter.

I've upgraded to v5.0.3 as you recommended, but it seems like the placeholder is added on the wrong HTML element.

It's adding the attribute on the div element that holds the input instead of replacing the default placeholder from the input.

This is how it looks in the browser:

And that's how I use it in the component:

thanks

[iamstevendao]

@constagorgan the prop is inputOptions.placeholder, not placeholder.

[constagorgan]

Thanks for your quick reply @iamstevendao, and please excuse my lack of attention. I didn't notice that the prop name changed in the recent versions.

It works perfectly fine with inputOptions 😃

In case someone else needs more details, I'll leave this here:

<template>
  ...
  <vue-tel-input v-model="..."
                 @onInput="..."
                 :inputOptions="options"">
  </vue-tel-input>
</template>
<script>
  ...
  data() {
    return {
      options: { placeholder: "Some placeholder" }
    }
  }
  ...
</script>

Result:

[iamstevendao]

@constagorgan it's cool ✌️

[arieltoledo]

@constagorgan Hi, I try to followed your example but Im getting inputoptions=[object Object ] instead. Thanks.

<vue-tel-input
   :only-countries="codigos_paises"
   :valid-characters-only="true" 
   :inputOptions="tel_options"
   enabled-country-code
   @input="onInput"  />

var app = new Vue ({
        el: '#page',
        data: {
                tel_options: {
                        'placeholder': "Ingrese su número de telefóno"
                },
.....

[constagorgan]

Hi @arieltoledo, sorry for getting back to you just now. In case you're still struggling with this problem - could you please try rewriting your JS like:

var app = new Vue ({
  el: '#page',
  data() {
    return {
      tel_options: {
        placeholder: "Ingrese su número de telefóno"
      }
    }
  }
...

And check if you are using the latest version of vue-tel-input (5.1.0 is the current version at the time of writing this comment)

[arieltoledo]

@constagorgan Thanks, changing Vue versión and rewriting the code to worked.

[darrylferdinands]

Is there no way to add a red asterisk at the end of the placeholder?