LayUI 完美兼容Vue.js

Posted 2020-10-19 冰狼爱魔

<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!