Change placeholder "Enter your phone number"? about vue-tel-input HOT 19 CLOSED

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:

from vue-tel-input.

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

from vue-tel-input.

@fbtwitter it should be working on v5.0.3

from vue-tel-input.

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

from vue-tel-input.

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

from vue-tel-input.

Thanks, @ATselikovSnp

from vue-tel-input.

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

from vue-tel-input.

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

from vue-tel-input.

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

from vue-tel-input.

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

from vue-tel-input.

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

from vue-tel-input.

@fbtwitter Can you reproduce it anywhere?

from vue-tel-input.

@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

from vue-tel-input.

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..

from vue-tel-input.

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

from vue-tel-input.

@constagorgan it's cool ✌️

from vue-tel-input.

@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"
                },
.....

from vue-tel-input.

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)

from vue-tel-input.

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

from vue-tel-input.