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"& ...
随机推荐
- 某喷码机品牌U盘存储的配置文件简记
U盘下的 KadexMicro 文件夹是喷码机生成的. 其配置文件存储在如上图位置,后缀 .mjt 实为 xml 文件. 内容如: <?xml version="1.0" e ...
- 2-1、FileBeat入门
FileBeat入门 要开始使用Filebeat设置,请安装并配置相关产品: 用于存储和索引数据的Elasticsearch. 用户界面的Kibana. 用于解析和增强数据的Logstash(可选). ...
- python实现常见排序算法
#coding=utf-8from collections import deque #冒泡排序def bubblesort(l):#复杂度平均O(n*2) 最优O(n) 最坏O(n*2) for i ...
- 依赖背包——cf855C好题
比较裸的依赖背包,但是想状态还是想了好久 转移时由于边界问题,虽然可以倒序转移,但当容量为0|1的时候,由于有初始值的存在 很难再原dp数组上进行修改,所以额外用tmp数组来保存修改后的值 #incl ...
- .Net 操作证书文件
一..Net加签与验签.经过测试,发现使用同一套私钥和公钥,JAVA和.Net可以实现互通 1.1 私钥加签 公钥验签 public void Encode() { try { var path = ...
- python设计模式---结构型之代理模式
主要想着nginx:) from abc import ABCMeta, abstractmethod # 结构型设计模式---代理模式 class Actor: def __init__(self) ...
- 华为指标OceanStore
https://support.huawei.com/enterprise/zh/doc/EDOC1000086637?idPath=7919749%7C7941815%7C21430818%7C21 ...
- Mybatis 源码学习系列
前言 很久以前,我们学习了Java,从一个控制台的 Hello world .开始,我们进入了面向对象的世界. 然后由学习了SQL语言,可以写出SQL语句来将尘封在硬盘之下的数据库数据,展现出来. 后 ...
- shell中使用带密码的方式直接pg_dump和psql
数据导出 pg_dump "host=XX.XX.XX.XX port=5432 user=XXXX password=XXXX dbname=XXXXX" -t table_na ...
- Ubuntu16.04安装编译caffe以及一些问题记录
前期准备: 最好是python虚拟环境 [anaconda的创建虚拟环境] 创建 conda create -n caffeEnv(虚拟环境名字) python=3.6 激活环境 source act ...