<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三级联动的更多相关文章

  1. 【巷子】---vue基于mint-ui三级联动---【vue】

    一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...

  2. 用vue实现省市县三级联动

    我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县 ...

  3. vue仿京东省市区三级联动选择组件

    工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...

  4. 在vue中如何实现购物车checkbox的三级联动

    最近用vue写一个电商项目,自然就少不了要写一个购物车的相关页面,功能完整的购物车的checkbox应该是三级联动的,1级checkbox是选中购物车中所有的商品,2级checkbox是选中某个店铺下 ...

  5. Vue如何使用vue-area-linkage实现地址三级联动效果

    很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:         1. ...

  6. vue移动端地址三级联动组件(一)

    vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...

  7. vue中的三级联动

    1.template里面的内容 2.js里面的内容 3.函数怎么写? 这是一个省市区的三级联动,首先你要传递中国的id,这样才能获取到所有的省份,所以在vue的项目中,我需要发一次进页面就请求(来得到 ...

  8. Vue 国家省市三级联动

    在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...

  9. 省市区三级联动(vue)

    vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码. <template> <section class="container"& ...

随机推荐

  1. Numpy 多维数组简介

     NumPy是一个功能强大的Python库,主要用于对多维数组执行计算.NumPy这个词来源于两个单词-- Numerical和Python.NumPy提供了大量的库函数和操作,可以帮助程序员轻松地 ...

  2. CSScript 使用纪要

    CSScript 运行C#脚本的开源项目,在笔者简要使用过程中,遇到了一些问题,现简单记录. 1. CS0433 使用非基本类型 当遇到 CS0433错误,提示 type is defined mul ...

  3. 010_TCP queue的研究

    先来回顾下三次握手里面涉及到的问题:1. 当 client 通过 connect 向 server 发出 SYN 包时,client 会维护一个 socket 等待队列,而 server 会维护一个 ...

  4. mysql 5.7版本后时间datetime 默认为 0000-00-00 00:00:00 问题

    CREATE TABLE `test_user` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `name` char(25) DEFAULT '' ...

  5. 在被vue组件引用的 js 文件里获取组件实例this

    思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...

  6. 【玩转开源】制作Docker镜像

    做嵌入式方向经常会遇到的一个问题,就是编译环境安装,如果换电脑,再重新安装环境是一个比较费时的事情,这个时候可以自己制作一个Docker镜像,然后把编译环境在Docker镜像里面配置好,以后同步环境就 ...

  7. React知识杂烩(持续更新)

    每隔半年不看官方文档,你就会不认识React了

  8. MySQL 常用命令(Linux)

    一.查看MySQL服务 MySQL服务应该随开机自动启动的.正常情况下,查看开机自动启动的服务使用chkconfig命令,如下: chkconfig --list 实际mysql是否真正启动,是否真正 ...

  9. RabbitMQ 实现远程过程调用RPC

    RPC调用的顺序1. 在客户端初始化的时候,也就是SimpleRpcClient类初始化的时候,它会随机的创建一个callback队列,用于存放服务的返回值,这个队列是exclusive的.连接断开就 ...

  10. Python Trick —— 命令行显示

    1 应用场景 在命令行展示下,有以下两种场景. 进度条显示.在同一行展示不断的更新的进度条. 信息显示/隐藏控制.比如希望向多个用户展示不同信息,各个用户彼此保密. 2 进度条展示 跟c语言类似,打印 ...