Laravel+ Vue+实现 + 三级联动！！！

客户端

首先引入vue+Ajax

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

  <label for="pwd">公司地址:</label><select name="" id="" style="width: 150px" @change="getqu()" v-model="quid"><option :value="item.id"   v-for="item in city">@{{ item.name }}</option></select><select name="" id="" style="width: 150px" @change="getxian()"   v-model="xianid"><option :value="item.id"   v-for="item in qu">@{{ item.name }}</option></select><select name="" id="" style="width: 150px" ><option :value="item.id"   v-for="item in zhen">@{{ item.name }}</option></select>

Vue

<script>new Vue({el:'#container',data:{city:null,qu:'',zhen:'',quid:'',xianid:''},mounted () {axios.get("{{url('getCity')}}").then(response => (this.city = response.data.data)).catch(function (error) { // 请求失败处理console.log(error);});},methods:{getqu () {// console.log(this.quid);axios.get("{{url('getQu')}}?id="+this.quid).then(response => (this.qu = response.data.data)).catch(function (error) { // 请求失败处理console.log(error);});},getxian(){axios.get("{{url('getQu')}}?id="+this.xianid).then(response => (this.zhen = response.data.data)).catch(function (error) { // 请求失败处理console.log(error);});}}})
</script>

服务端

 public function getCity(){$data = City::where('pid',0)->get()->toArray();return ['code'=>200,'msg'=>'seccess','data'=>$data];}public function getQu(Request $request){$data = City::where('pid',$request->get('id'))->get()->toArray();return ['code'=>200,'msg'=>'seccess','data'=>$data];}

Laravel+ Vue+实现 + 三级联动！！！相关推荐

vue——省市区三级联动demo
最近学习vue,想着写一写demo练习练习. 此demo是省市区的三级联动,像这样的场景我们经常看到.我也是刚开始写没有头绪,然后多方查资料. 写此demo时踩过的坑: 1.数据:我们希望后台给我们的 ...
vue 省市区三级联动 antd 级联组件 Cascader
需求与功能该功能实现了中国内的省市区的三级联动,基于 antd-vue 中的 Cascader 做的组件,支持原有的所有功能效果展示支持联想搜索支持显示部分省份例子(本例子是基于 ant ...
vue省市区三级联动mysql,js/json,html/jsp
大家好,我是烤鸭: 省市区三级联动数据及页面: 测试的时候,发现少了几个地区,现在补上了,也优化了下排版. 如果你懒得复制和看的话,这里是打包的下载地址. 之前的资源地址也改了,http://down ...
Vue实现三级联动样式二
页面的效果图展示: vue.js文件: <template><div class="linkage"><el-select v-model=" ...
vue实现三级联动，多级联动
vue做项目的时候,遇到了要实现多级联动的需求,由于只是小功能,就没有引入插件,自己实现了一下. 需求: 需要统计用户购买的3C产品的信息,如下图需求评审的时候确定了让前端存储维护产品信息,所以下面 ...
vue城市三级联动组件 vue-area-linkage
Install the pkg with npm: // v5之前的版本 npm i --save vue-area-linkage// v5及之后的版本 npm i --save vue-area- ...
vue省市区三级联动
HTML代码 <div id="example"><select v-model="prov"><option v-for=&qu ...
超实用的vue省市区三级联动（带地区编码）
效果图完整代码 <template><div><el-row><el-form :model="queryParams" inline ...
开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份.城市.区.县三级联动源码 1.三级联动框样式上图: 请访问:这里!! 查看三级联动器效果. 2.如何在html里面引用文件的目录路径为: data.js是存放我 ...

Laravel+ Vue+实现 + 三级联动！！！

Laravel+ Vue+实现 + 三级联动！！！相关推荐

最新文章

热门文章