vue三级联动
<select @change="getArea(province_id,1)" v-model="province_id">
<option value="">请选择省</option>
<option v-for="item in province" :value="item.area_id">{{item.area_name}}</option>
</select>
<select @change="getArea(city_id,2)" v-model="city_id">
<option value="">请选择市</option>
<option v-for="item in city" :value="item.area_id">{{item.area_name}}</option>
</select>
<select v-model="country_id">
<option value="">请选择区/县</option>
<option v-for="item in country" :value="item.area_id">{{item.area_name}}</option>
</select>
app = new Vue({
el: '#app',
data: {
province: [],
city: [],
country: [],
},
methods: {
getArea: function(id, type) {
var that = this;
flyPost('api/index/getarea', {
_ajax: 1,
id: id
}).then(function(res) {
console.log(id);
if (res.code == 1) {
if (id == 0) {
that.province = res.data;
} else {
if (type == 1) {
that.city = res.data;
} else if (type == 2) {
that.country = res.data;
}
}
} else {
showAlert({
title: '提示',
message: res.msg
});
}
}.bind(this)).catch(function(err) {
//console.log(err);
});
}
},
mounted: function() {
var that = this;
that.getArea(that.id);
}
})
vue三级联动的更多相关文章
- 【巷子】---vue基于mint-ui三级联动---【vue】
一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...
- 用vue实现省市县三级联动
我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县 ...
- vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
- 在vue中如何实现购物车checkbox的三级联动
最近用vue写一个电商项目,自然就少不了要写一个购物车的相关页面,功能完整的购物车的checkbox应该是三级联动的,1级checkbox是选中购物车中所有的商品,2级checkbox是选中某个店铺下 ...
- Vue如何使用vue-area-linkage实现地址三级联动效果
很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1. ...
- vue移动端地址三级联动组件(一)
vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...
- vue中的三级联动
1.template里面的内容 2.js里面的内容 3.函数怎么写? 这是一个省市区的三级联动,首先你要传递中国的id,这样才能获取到所有的省份,所以在vue的项目中,我需要发一次进页面就请求(来得到 ...
- Vue 国家省市三级联动
在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...
- 省市区三级联动(vue)
vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码. <template> <section class="container"& ...
随机推荐
- Maven - <Profile>详解
转载自:https://www.cnblogs.com/wxgblogs/p/6696229.html Profile能让你为一个特殊的环境自定义一个特殊的构建:profile使得不同环境间构建的可移 ...
- mysql 锁的现象和解决
2018-12-3 14:43:11 星期一 数据库锁了的现象: 一个进程进程一直在尝试更新, 而且杀不掉, 重启mysql以后还是会有; 一个update语句执行了很久; 写的业务都不可以, 查询也 ...
- Nginx的启动、停止和重启
启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@sijizhen sbin]# /usr/local/nginx/sbin/nginx -c /usr/l ...
- app个推(透传消息)
- pads layout 自动打地孔
对于PCBLayout来说,后期处理也是一项费时操作,比如为了让板子耦合的更好,会在板子空旷位置打上很多地过孔.“自动打地孔”则会让你省时又省心,一不小心就提前了工期哦,哈哈! 一.下面打开一个简单的 ...
- 运行maven命令的时候出现jre不正确
出错详情: Unable to locate the Javac Compiler in: C:\Program Files\Java\jre1.6.0_07\..\lib\tools.jar Ple ...
- 生成免费SSL通配证书
通过Let's Encrypt 生成免费SSL证书 有效期是3个月 1.下载工具certbot-auto wget https://dl.eff.org/certbot-auto chmod +x c ...
- python设计模式---结构型之代理模式
主要想着nginx:) from abc import ABCMeta, abstractmethod # 结构型设计模式---代理模式 class Actor: def __init__(self) ...
- C#学习-扩展方法
并不是所有的方法都可以用作扩展方法,如何分辨代码中定义的是扩展方法还是普通方法呢? 我们需要考察它是否符合下列扩展方法的定义规则: 1.扩展方法必须在一个非嵌套.非泛型的静态类中定义: 2.它至少要有 ...
- postgresql 53300错误
1.查看当前库的最大连接数 show max_connections; 2.查看当前数据库的活动连接数 select datname,application_name,pid,state from p ...