CODEWITHSUNDEEP
vue.jsvuejs2
Abdulrahman Fawzy
Abdulrahman Fawzy

Reputation: 149

How to use events of vue-tel-input?

I've installed vue-tel-input component and included it. I want to use the validate event tha's found in a link! but I can't. How to use it in the compoennt?

Upvotes: 1

Views: 7654

Answers (4)

Imtiaz
Imtiaz

Reputation: 2534

I'll try the answer to be beginner friendly, as I remember myself struggling with it.

You can use the @validate event. It fires when the correctness of the phone number changes (from true to false or vice-versa) and when the component is mounted. - from official docs

In your template:

<vue-tel-input v-model="phone" @validate="phoneObject"></vue-tel-input>
<span v-if="isValid">valid</span>
<span v-else>not valid</span>

Add this method in your script:

phoneObject: function(object) {
    this.isValid = object.valid;
}

Example:

new Vue({
  el: '#app',

  data: () => ({
    phone: null,
    isValid: null,
  }),
  methods: {
    phoneObject: function(object) {
      console.log(object);
      if (object.valid === true) {
        this.isValid = true;
      } else {
        this.isValid = false;
      }
    },
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<link href="https://unpkg.com/vue-tel-input/dist/vue-tel-input.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/vue-tel-input.umd.min.js"></script>

<div id="app">
  <vue-tel-input v-model="phone" @validate="phoneObject"></vue-tel-input>
  <div>
    <span v-if="isValid">valid</span>
    <span v-else>not valid</span>
  </div>

</div>

Upvotes: 1

Hamza Atef
Hamza Atef

Reputation: 21

// in methods
phoneObject(object) {
  console.log(object.valid);
},
// in template
<vue-tel-input
  v-model="yourModel"
  @validate="phoneObject"
></vue-tel-input>

Upvotes: 2

F3CP
F3CP

Reputation: 800

The events are regular vue component events. You can listen for these events as outlined here in the vue docs. https://v2.vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

For example, to use the validate event you would add a listener to the vue-tel-input component.

The listener will automatically pass the arguments to your method.

// In your template
<vue-tel-input
  v-model="yourModel"
  @validate="yourValidationMethod"
/>

// In your component methods

yourValidationMethod: function ({ number, isValid, country }) {
    // Do stuff with the arguments passed by the vue-tel-input component
},

Upvotes: 7

Loki
Loki

Reputation: 1205

Have your tried with Info from their page ? In main.js 

import Vue from 'vue'
import VueTelInput from 'vue-tel-input'

Vue.use(VueTelInput)

and then use it as component 

<template>
  <vue-tel-input v-model="phone"></vue-tel-input>
<template>

Upvotes: -1

Related Questions