vue.js - 如何在 vue tel 输入中获取国家/地区代码?
问题描述
我的组件
<v-form>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="3">
<vue-tel-input v-model="phone"></vue-tel-input>
</v-col>
</v-row>
</v-container>
<v-btn
color="success"
@click="submit"
>
submit
</v-btn>
</v-form>
当我点击提交时,我只是接到电话。我怎样才能得到国家代码呢?
[参考] https://www.npmjs.com/package/vue-tel-input-vuetify
[Codepen] https://codepen.io/positivethinking639/pen/YzzjzWK?&editable=true&editors=101
解决方案
似乎vue-tel-input
提供了一个country-changed
事件。根据文档,它甚至是第一次被触发并返回一个对象:
Object {
areaCodes: null,
dialCode: "31",
iso2: "NL",
name: "Netherlands (Nederland)",
priority: 0
}
因此,可以将此事件处理程序添加到组件中,并且可以将国家代码存储在组件中,就像您已经为 phone 值所做的那样。
HTML 部分
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="3">
<vue-tel-input v-model="phone" v-on:country-changed="countryChanged"></vue-tel-input>
</v-col>
</v-row>
</v-container>
<v-btn
color="success"
@click="submit"
>
submit
</v-btn>
</v-form>
</v-app>
</div>
JS部分
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
phone: null,
country: null
}
},
methods: {
countryChanged(country) {
this.country = country.dialCode
},
submit() {
console.log(this.phone);
console.log(this.country);
}
}
});
在这里你可以看到一个工作版本: https ://codepen.io/otuzel/pen/PooBoQW?editors=1011
注意:我不是每天都使用 Vue,所以我不确定这是否是通过事件处理程序修改数据的最佳实践。
推荐阅读
- visual-studio - 由于与 MSVC14 和 AVX 的未对齐访问而导致 Eigen 崩溃
- javascript - 在父组件中使用子方法
- javascript - 根据属性值合并数组中的对象
- javascript - 如何使选择选项禁用
- jquery - DataTables - 单击“aLengthMenu”时显示警报
- swift - 如何调用超级方法?
- sql-server - 递归 CTE 问题
- powershell - 在 CSV 文件中查找值并与今天的日期进行比较
- python - 413 Request Entity Too Large 使用 Django Admin 和 Nginx 配置上传文件
- eclipse - 在 Eclipse 上导出到可运行的 jar 时,相对路径不起作用