html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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> </head> <body> <div id="app"> <form action="{:url('save')}" method="post"> 商品名称：<input type="text" name="goods_name"> <br> 商品价格：<input type="text" name="goods_price"> <br> 市场价格：<input type="text" name="market_price"> <br> 商品描述：<input type="text" name="goods_remark"> <br> 商品图片：<input type="file" name="goods_logo"> <br> <!-- 递归处理页面展示--> 商品类型： <select name="cate_id"> {volist name="data" id="vo"} <option value="{$vo.id}"> {switch name="vo.f" } {case value="1"}{$vo.cate_name}{/case} {case value="2"}{$vo.cate_name}{/case} {case value="3"}{$vo.cate_name}{/case} {/switch} </option> {/volist} </select> <br/> <!-- 三级联动--> 商品分类： <select name="" v-model="tid" @change="two"> <option v-for="item in datas" :value="item.id" >{{item.cate_name}}{{item.pid}}</option> </select> <select name="" v-model="tids" @change="san"> <option v-for="item in datas2" :value="item.id" >{{item.cate_name}}{{item.pid}}</option> </select> <select name="cate_id" v-model="tidss"> <option v-for="item in datas3" :value="item.id" >{{item.cate_name}}{{item.pid}}</option> </select> <br> <input type="submit" value="提交"> </form> </div> </body> </html> <script> var app=new Vue({ el:'#app', data:{ info:[], datas:[], datas2:[], datas3:[], tid:[], tids:[], tidss:[], }, mounted () { axios .get('http://www.pyg.com/index.php/liandong/category/two1?id='+this.tid) .then(response => (this.datas = response.data.data)) .catch(function (error) { // 请求失败处理 console.log(error); }); }, methods:{ two:function () { axios .get('http://www.pyg.com/index.php/liandong/category/two1?id='+this.tid) .then(response => (this.datas2 = response.data.data)) .catch(function (error) { // 请求失败处理 console.log(error); }); }, san:function () { axios .get('http://www.pyg.com/index.php/liandong/category/two1?id='+this.tids) .then(response => (this.datas3 = response.data.data)) .catch(function (error) { // 请求失败处理 console.log(error); }); } } }) </script>
控制器
public function two1($id){ $data=appliandongmodelCategory::where('pid',$id)->select(); return json(['code'=>200,'msg'=>'查询成功','data'=>$data]); }