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"& ...
随机推荐
- git知识总结-2.git基本操作之原理说明
0.前言 本文主要对git常用命令的工作原理做一个详细的说明,常用命令主要包括: 1.git add git add相关命令很简单,主要实现将工作区修改的内容提交到暂存区,交由git管理. 2. gi ...
- Unity优化之贴图
默认情况下当你把图片导入到unity中时,unity会自动把图片转换成最适合当前平台的压缩格式.如果你有一些特殊的需求,unity也提供了覆盖默认压缩格式的方法,如下图 在图片的Inspector窗口 ...
- css 生成图片添加的十字
<span class="add" title="继续上传"></span> .add { display: inline-block; ...
- 关于form-checkbox 必填项无效的错误
校验规则要写在一个form里 检查data,给个默认值. 否则刚进去错误提示不显示. 其次,要加 type 类型,注意大小写 触发类型为 change .
- VMware虚拟机扩充硬盘容量
- 小米平板4 Plus获取Root超级权限的步骤
小米平板4 Plus有么好方法开启Root权限?大家都清楚,Android机器有Root权限,一旦手机开启root相关权限,就可以实现更强大的功能,打比方大家部门的营销部门的同事,使用个别营销应用都需 ...
- Hadoop之Flume 记录
出现这个错误是自己的粗心大意,解决: 在配置flume-conf.properties文件时,source和channel的对应关系是: myAgentName.sources.mySourceNam ...
- Mysql常用30种SQL查询语句优化方法
出处:http://www.antscode.com/article/12deee70111da0c4.html 1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使 ...
- windows使用pyecharts报错 No module named 'pyecharts_snapshot
下载此文件后,使用命令 pip install pyecharts_snapshot-0.1.8-py2.py3-none-any.whl 安装完成即可 链接地址:https://pypi.org/p ...
- java gui 2
1,编写程序,随机生成两个数,用户输入两个数的和,并进行评判.程序的初始界面如下: 点击“获取题目”,随机生成两个100以内的int类型的数,界面如下: 提示: (1)使用java.util.Rand ...