layUI+Vue+vue-resource示例
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<div id="app"> <form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-input-block"> <select name="city" lay-verify="required"> <option value="">请选择一个商家</option> <option v-for="(maker, index) in maker_list" :value="maker.mid">{{ maker.name }}</option> </select> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <a class="layui-btn" :href="maker_qq_url">联系客服</a> </div> </div> </form> </div> <script src="layui/layui.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> <script> var App = new Vue({ el: '#app', data: { selected: 0, maker_list: [], maker_qq_url: '' }, mounted: function () { this.getMakerList(); }, methods: { getMakerList: function (e) { var vm = this; vm.$http.get('/api/maker/list').then(function (response) { vm.maker_list = response.data; vm.$nextTick(function () { layui.use(['layer', 'form'], function(){ var form = layui.form(); form.on('select', function(data){ App.getMakerQQ(data.value); }); form.render(); }); }) }, function (response) { alert('获取商家列表失败！'); }); }, getMakerQQ: function (mid) { var vm = this; vm.$http.get('/qq/'+mid).then(function (response) { vm.maker_qq_url = 'mqqwpa://im/chat?chat_type=wpa&uin='+response.data+'&version=1&src_type=web&web_src=oicqzone.com'; }, function (response) { alert('获取商家QQ失败！'); }); } } }) </script> |
学习参考：
https://www.cnblogs.com/chenhuichao/p/8308993.html
https://www.runoob.com/vue2/vuejs-ajax.html