iamstevendao / vue-tel-input

International Telephone Input with Vue
https://iamstevendao.com/vue-tel-input/
MIT License
811 stars 339 forks source link

Error after set null. A text for parsing must be a string #241

Open johnkarpn opened 3 years ago

johnkarpn commented 3 years ago

Hi! I found an error in my project. If you set the variable to null after loading your component, you get the error "A text for parsing must be a string". Is this behavior only in my project or is it really a component error? After this error, the component does not work

<template>
  <vue-tel-input v-model="obj.phone"></vue-tel-input>
  <button @click="clickBtn()">Set null</button>
</template>

<script>
import { VueTelInput } from 'vue-tel-input'

export default {
  components: {
    VueTelInput,
  },
  data() {
    return {
      obj : {
        phone : null
      }
    };
  },
  methods : {
    clickBtn() {
      this.obj.phone = null;
      // or this.$set(this.obj, 'phone', null);
    }
  }
};
</script>
altherlex commented 3 years ago

how did you cope with it?

johnkarpn commented 3 years ago

I had to temporarily manually set the string value. That's not good

alex-authlab commented 3 years ago

any solution?

Mach12 commented 3 years ago

This is still a problem as far as I can tell. I don't see a good reason why null couldn't be used to express an empty value.

blazpavlica commented 1 year ago

Still broken, this should really be fixed, we're using version 6.0.0-beta.6 which still works.

olivsinz commented 1 year ago

Hi! I found an error in my project. If you set the variable to null after loading your component, you get the error "A text for parsing must be a string". Is this behavior only in my project or is it really a component error? After this error, the component does not work

<template>
  <vue-tel-input v-model="obj.phone"></vue-tel-input>
  <button @click="clickBtn()">Set null</button>
</template>

<script>
import { VueTelInput } from 'vue-tel-input'

export default {
  components: {
    VueTelInput,
  },
  data() {
    return {
      obj : {
        phone : null
      }
    };
  },
  methods : {
    clickBtn() {
      this.obj.phone = null;
      // or this.$set(this.obj, 'phone', null);
    }
  }
};
</script>

Use an empty string instead of null. Example: try with:

//...
data() {
  return {
    obj : {
      phone : ''
    }
  };
},
  //...

This error is caused by libphonenumber-js