<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="vue.js"></script><script src="vue-resource.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(‘http://hunteryun.com/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(‘http://hunteryun.com/api/maker/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>
本文转自盛赞!大赞!狂赞!贤心!LayUI完美兼容Vuejs!
LayUI 完美兼容Vue.js
原文地址:https://www.cnblogs.com/itsharehome/p/8127215.html