Vue 中的三级联动问题? 10C


---请选择---
{{a.name}}

....
const addressApp = new Vue({
....
data:{
pList:[],//省列表
cList:[],//市列表
aList:[]//区列表
}
....

});
备注:aList是后台异步请求获取的值,
格式为:[
{name:"河北省",provinceId:"1001"},
{name:"河南省",provinceId:"1002"},
...
]
需求:
当选中下拉框中的某个选项时,如何获取这个选项的provinceId,通过什么事件
并向后台发起一个异步的请求,通过provinceId,获取城市的列表
(option绑定单击事件并传递对象无法触发!)

0

1个回答

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
在用vue做三级联动时遇到的监测问题(附与angular脏检查区别)
n n n 做一个三级联动时遇到了样式没有跟着当次数据变化时变化的问题nnnnnnnimage.pngnn也就是说点击title标签的时候按理来说 数据发生变化 vue 应该可以监测到并且渲染在页面上 color标签里的 按钮状态就会实时更新nn原理是n <div class="specSel">n <h3 class="...
关于VUE+MintUI的picker省市区三级联动以及回显
最近一直在忙公司的项目,记录工程中出现的一些记得住的小问题rn1.关于MintUI中的picker的使用rn首先是项目要求:做一个关于收货地址的增删改查页面,其中涉及区域选择,这里我们采用的MintUI的pickerrn先看项目效果图(添加)rn只有点击确认,城市的值才会保存rnrn推荐网址地址 https://www.cnblogs.com/WoAiZmm/p/8413604.htmlrn刚开始我是按照这个网...
Vue 中实现三级联动下拉框
<!DOCTYPE html>n<html lang='en'>n<head>n <title>下拉框三级联动</title>n <meta name="viewport" content="width=device-width, initial-scale=1">n <!-- bootstrap -->n &lt...
vue中实现省市区三级联动(V-Distpicker插件)
本次项目中使用了V-Distpicker 插件实现了省市区三级联动nnnV-Distpicker 项目文档地址nV-Distpicker git地址nnn使用方法nnnnnpm install v-distpicker --savennnnimport VDistpicker from 'v-distpicker'nnexport default {n components: { VDistp...
vue 实现省市区三级联动
1. 省市区数据表prpvinces.js温馨提示:该数据表未按 eslint 语法编写,因此会报错。事先将 eslint 关闭问题即可解决。关闭方法:n 找到 build>webpack.base.conf.js>module.exports>module>rulesn删除以下代码:{n test: /\.(js|vue)$/,n loader: 'eslint-loader'
基于Vue的三级联动下拉框
展示html部分n使用v-model设置和获取select的值n使用v-for显示option列表n使用:value设置option属性n使用{{}}输出内容n<div id="test">n 单位:n <select v-model="UnitSelected">n <option v-for="item in UnitList" :value="item.id">{{i
Vue完成三级联动 地址联动
Vue实现三级联动nnHtml部分:nn nn&amp;lt;div class=&quot;form-group&quot;&amp;gt;nn    &amp;lt;div class=&quot;col-sm-2 control-label&quot;&amp;gt;省&amp;lt;span style=&quot;color:red;&quot;&amp;gt;*&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;nn    &amp;lt;div class=&qu
Vue2中的省市区三级联动(仿淘宝)
三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:http://download.csdn.net/detail/zhaohaixin0418/9862255。n首先页面显示如下:nn然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景
关于vue响应式3级联动,iview选择组件问题的心得
最近做一个3级联动,考虑复用问题,将新建与编辑共用了很多的代码。但问题产生了,哪怕是此刻也有些不明白。弹框如下图所示n假设一级为oneList =[1,2,3,4,5],二级为根据一级选中的值去跟新列表twoList=[],n代码如下n这便是选中一级之后,根据change事件去请求二级列表,初次写法仅在首航进行了数组清空的操作,没有this.editStatus代码块的判断,这种写法在创建时完美,...
vue实现中国区域的三级联动
安装插件rnnpm install v-distpickerrnrn代码rn&amp;amp;lt;template&amp;amp;gt;rn rn &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt;rn rn &amp;amp;lt;el-cascaderrn rn size=&amp;quot;large&amp;quot;rn rn :options=&amp;quot;options&amp;quot;rn rn
VUE,三级联动(省、市、区)插件!
以前写VUE三级联动都需要自己在网上复制粘贴修改一些代码,今天忽然发现了一个插件,十分简单快捷。nn官网:https://www.awesomes.cn/repo/jcc/v-distpickernn使用步骤:nn1.下载nn      cnpm install v-distpicker --savenn2.配置与引入nn      在main.js中写: nnnimport Distpicker...
vue+element下拉框实现 三级联动
要求实现三个带搜索的 下拉框 的三级联动, element 里的下拉框带搜索,可以实现,就是三级联动需要自己实现nnnn给到 三个接口,1,获取小区list nn                          2, 获取该小区楼栋号nn                          3,获取楼栋下的房间号nn实现如下:nnnn因为涉及到回填,所以 页面一加载就要获取 url 的小区id,n...
vue-cli实现省市县三级联动
1:想给option做点击事件,当选中时,找到对应的子数组,但是option没办法用vue绑定@click事件,只能在select上绑定@change事件nn2:我把option中的value的值赋成了整个循环的对象,比如说我点击了‘北京省’,我获取到了下面json中第一个对象,也包括他的市和区,因为在所有的@change的方法中,我不仅仅要获取下级,还要将选中的选中的北京省的id存起来nn3:点...
element ui省市区三级联动-遇到的问题
一、省市区数据来源n百度了很多,只有一个官方数据来源是国家统计局官网的http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2017/11/01/110101.html,但是不是能直接用在代码中的,也看到了别人自己写的json格式,觉得都不是通用办法,后来看到了有用mui框架的city picker的data.city.js,我也就下了这个文件来使用。并...
Vue三级联动之保存已选地址
以前给别人完善过一个Vue的三级联动,今天想起来,给大家分享下,只供参考,请勿吐槽&amp;lt;script src=&quot;https://unpkg.com/vue&quot;&amp;gt;&amp;lt;/script&amp;gt;n&amp;lt;style&amp;gt;n* {n padding: 0px;n margin: 0px;n}nli {n list-style: none;n height: 30px;n line-height:...
vue之省市区三级联动
n安装插件nnnnnnpm install v-distpicker --savennn使用nnnnn&amp;lt;template&amp;gt;n &amp;lt;v-distpicker @selected=&quot;onSelected&quot;&amp;gt;&amp;lt;/v-distpicker&amp;gt;n&amp;lt;/template&amp;gt;nn&amp;lt;script&amp;gt;nimport VDistpicker from 'v-di...
vue地址国省市三级联动显示/传值
HTMLnn &amp;lt;!-- 国家 --&amp;gt;n          &amp;lt;li&amp;gt;&amp;lt;span &amp;gt;地址&amp;lt;/span&amp;gt;n            &amp;lt;div&amp;gt;n              &amp;lt;select name=&quot;sel&quot; id=&quot;sel&quot; v-model=&quot;address&quot; @change=&quot;change&
vue移动端省市区三级联动
VDistpickernn
vue+Element-ui三级联动,下拉框有值不能选中的解决方案
HTML代码nn解决办法:nnnn应该是级联太深了,导致vue来不及刷新,所以使用this.$forceUpdate()进行强制刷新。n
vue 设置下拉框三级联动
如图中,用vue实现三个选择框是联动关系,首先选择厂商,然后品牌下拉框中出现的品牌是所选厂商包含的品牌,同理,选择完品牌后,车型也是所选品牌中包含的车型。nn例如有这样的对应关系:nn厂商n 品牌n 车型n 长城n 哈弗n HB01n HB02n HB03n WEYn HB11n HB13n HAVELn AH21n 北汽n 越野n BJ20n BJ...
基于Vue+element UI 的手动创建地区json的三级联动
基于Vue+element ui+axios的三级联动,手动创建静态的json文件,axios获取json文件,并获取数据
Vue2中省市区三级联动json
这个直接是个data,放入你的vue2项目中即可。(因为我的项目是用的vue2,所以,其他的属性跟博客内容是吻合的。请配合博客再下载此json)
element+vue 组件 日期三级联动
element vue 时间组件封装 年月日 三级联动 选择 时间三级联动组件
vue实现省市区三级联动
npm 安装nnnnpm install v-distpicker --savennVue全局引入组件nnnimport Distpicker from 'v-distpicker'n nVue.component('v-distpicker', Distpicker)nn也可以那里需要,哪里引入nnnimport VDistpicker from 'v-distpicker'n nexpor...
vue中搭配element ui实现省市区三级联动
n n n 业务场景一:选择框,类似于选择目的地,出发地这种,,可以设置省,或者省市,以及省市区nnnnn业务场景(一)n业务场景二:在编辑页或者添加页中会需要更加详情的,省市区以及后面另加一个框nnnnn业务场景(二)n首先,从后台拿回来的数据是这样子的nnnnn后台返回数据1nnnnnn后台返回数据2n首先拿到数据输出到控制台上是这样的nnnnn控制台1n第一步处...
vue基于element三级联动城市功能(完整demo代码)级联菜单
先来张图(包含2级联动 ):nnnn三级城市数据 jsonnn链接:https://pan.baidu.com/s/1NKJcN4VFe4MuqRwKJD3PXg 提取码:gspvnn和同事一块开发的项目!之前没用element做过城市联动,这里同事写好的拿来复用,感觉方法还可以记录下来nn直接上代码(包含2级联动 ),请忽略多余部分代码nnn&lt;template&gt;...
用Vue实现省市区三级联动
在线预览:github.czero.cn/vueaddress/n源码:github.com/czero1995/v…nhtmlnn &amp;lt;input type=&quot;text&quot; placeholder=&quot;选择地区&quot; :value=&quot;addressText&quot; readonly=&quot;&quot; @click=&quot;addressModel = true&quot; /&amp;gt;nn &amp;lt;div class=
vue 省市区三级联动选择 pc端项目插件element-china-area-data(非常推荐)
使用步骤:nn1.nnnpm install element-china-area-data -Snn2.nnimport { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'nnps:nn...
vue省市区三级联动插件(使用mint-ui的picker)
用mint-ui中的picker组件封装的省市区插件(使用环境:vue-cli),demo下载地址:https://download.csdn.net/download/yanzyan/10516230nn下载后,使用npm install命令生成node_modules文件夹,再使用npm run dev命令启动项目,看是否是你需要的。nn如何在自己项目中使用?nnn此插件基于mint-ui。需...
三级联动基于vue和layui
&amp;lt;%@ page contentType=&quot;text/html;charset=UTF-8&quot; language=&quot;java&quot; %&amp;gt;n&amp;lt;html&amp;gt;n&amp;lt;head&amp;gt;n &amp;lt;%@ include file=&quot;../../common/head.jsp&quot; %&amp;gt;n &amp;lt;script type=&quot;text/javascr
vue省市区三级联动
前言rn最近在学习开发一个新的H5产品,想用【mint-ui】的Picker组件区创建一个地址选择器。发现mint-ui官网只有一个简单的示例,满足不了省市区三级联动的需求,找了很多相关文档也没有一个比较系统的说明或demo。为此,想自己做一个总结并写一个自己的demo,方便以后使用。rn一、创建一个空项目rn在写这个demo前,需要先构建一个空项目,并做好局域网配置,还不懂的可以先看【最近写的一篇博客...
vue移动端城市三级联动组件
 先看效果图nnnn以下组件代码nnn&amp;lt;template&amp;gt;n &amp;lt;div class=&quot;address&quot;&amp;gt;n &amp;lt;div class=&quot;addressboxbg&quot; @click=&quot;cancel&quot;&amp;gt;&amp;lt;/div&amp;gt;n &amp;lt;div class=&quot;addressbox&quot;&amp;gt;n &amp
用Vue、element-ui、axios实现省市区三级联动
现在大部分电商的网站、app都需要用户或者管理者去选择设置地区等位置信息。下面我就介绍一下前端开发者用vue,axios,element-ui开发一个省市区三级联动的组件。nn1.准备工作,首先我们需要全中国的省市区资源的json数据(科普一下:前六位数字是身份证前六位)nn2.搭建vue-cli,安装axios,element-ui,创建vue,webpack项目nn    1).nn    在...
vue+eleui实现三级联动
&amp;lt;template&amp;gt; &amp;lt;!-- 资源管理下的业务功能查询条件组件L 粘贴在vue任意组件中就能运行 点击新建 弹出框显示三级联动 请忽略样式 --&amp;gt; &amp;lt;div class=&quot;yh_BusinessTable&quot;&amp;gt; &amp;lt;div class=&quot;BusinessTable_title clearfix&quot;&amp;gt; &amp;lt;h3 class=&q
vue-》世界国家 省市,三级联动,vue,基于mint-ui,中国 省市县三级联动
vue-》世界国家 省市,三级联动,vue,基于mint-ui,中国 省市县三级联动 内附说明, 如有需要,请联系QQ 643929860
vue 实现仿京东、淘宝省市区三级联动
vue 实现仿京东、淘宝省市区三级联动在做电商或其他项目的时候,物流我们肯定会集成进去,那么我们肯定需要集成地址管理,地址管理除了最基本的省、市、区外,我们还要单独添加一个详细地址字段,不然我们无法精确到详细地址,那么最后我们的详细地址就是省市区加上我们的详细地址字段,好了,我们先来看一下省市区三级联动的效果图其实这个功能可以封装成一个组件呢,我这里面集成了VUX移动端组件,你用的时候html里面...
HTML5移动端省市区三级联动源码
移动端三级三级联动选择,完美适配各种机型,兼容性已做好,
vue里面的省市区三级联动vue-area-linkage,设置初始值和把修改的值传给后台。为什么编辑的时候显示的还是第一赋值的。如何修改
vue-area-linkagenn点这里看demo:https://dwqs.github.io/vue-area-linkage/nn安装nn这里安装v5之后的版本  nnnpm i --save vue-area-linkage area-datann nn在mian.js里面注册nnimport VueAreaLinkage from 'vue-area-linkage';nnimport...
日期的三级联动(纯js)
日期的三级联动
vue.js+mint-ui的Popup组件和Picker组件实现省市县三级联动功能
前言      在工作中遇到省市县三级联动的需求,传统的pc端大部分是用3个HTML &amp;lt;select&amp;gt;标签根据选中的一级地址去获取二级地址,然后根据二级地址去获取三级地址。实现省市县三级地址选择,需要2次服务端请求。这里使用mint--ui的Popup弹出框组件和picker选择器组件,无需请求服务端,通过遍历本地的json文件,实现本地输出三级地址,同时给每级地址绑定一个code,从...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java学习中常见的问题 java学习中遇到的问题