如何使用vue-tel-input的事件?

00jrzges  于 2023-03-19  发布在  Vue.js
关注(0)|答案(4)|浏览(229)

我已经安装了vue-tel-input组件并包含了它。我想使用a link!中的validate事件,但是我不能。如何在组件中使用它?

41ik7eoe

41ik7eoe1#

这些事件是常规的vue组件事件。您可以侦听这些事件,如vue文档中所述。https://v2.vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events
例如,要使用validate事件,需要向vue-tel-input组件添加一个侦听器。
侦听器会自动将参数传递给您的方法。

// 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
},
8wtpewkr

8wtpewkr2#

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

3ks5zfa03#

你有没有试过从他们的页面上获取信息?在main.js

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

Vue.use(VueTelInput)

然后将其作为

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

8hhllhi24#

我会尝试回答是初学者友好,因为我记得自己挣扎与它。
您可以使用@validate事件。当电话号码的正确性发生变化(从true到false或反之亦然)以及组件被挂载时,它会触发。-来自官方文档
在模板中:

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

在脚本中添加此方法:

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

示例:

一个二个一个一个

相关问题