2018-11-28 layui select 与 vue 适配

背景：前端给的layui的后台管理框架，而我们后台最近都转型用vue
问题1：select上的值与vue未绑定。
问题2：layui，select未渲染。
问题3：渲染时，v-for循环时出现undefined

解决思路：未渲染的原因是layui在vue还未渲染完成就开始渲染，导致数据未获取到；
无法绑定的原因是layui自动渲染了select，所以根本没绑对地方，应该使用layui的lay-filter拦截点击，并将vue中的值做修改;
undifined的原因不是很明确，解决办法是不要使用{{}}而用v-html

代码：

<div class="layui-input-inline inlineBlock type_select">
    //由于我的是for循环，所以用隐藏值来定位
    <input type="hidden" v-model="index" />
    <select name="interest" lay-filter="interest" >
       <option v-for="model,index in moudleTypes" :value="index" v-html="model.name" :selected="moudle.type==model.value"></option>
    </select>
</div>

  //在vue得mounted方法中使用
  mounted: function () {
          //当vue渲染结束再渲染layui
          this.$nextTick(function () {
               initForm();
          });
  }
    
   function initForm() {
           layui.use('form'], function() {
                var form = layui.form;
                form.render('select');
                form.on('select(interest)',function (data) {
                    vm.moudles[data.elem.parentNode.firstChild.value].type = data.value
                });
   }