解决 v-model 在 layui-form 中双向绑定失效的问题

简介：

在使用 layui-form 时遇到一个坑, 就是使用 v-model 无法与 layui-form 中的下拉框内容实现双向绑定, 出现这个问题的原因不太清楚, 应该是两个框架之间在某些地方产生的冲突, 下面利用两个框架各自的特性来变相地实现双向绑定.

1. layui-form 向 Vue 绑定

想要实现的效果是当 layui-form 下拉框中的内容变动时, Vue 中与之绑定的变量同步变动, layui-form 的代码如下

<form class="layui-form" id="form-member-add">
 <div class="layui-form-item">
        <label class="layui-form-label required">文件类型</label>
        <div class="layui-input-block">
            <select id="fileName" name="fileName" v-model="genTemplate.fileName" lay-filter="form_fileName">
                <option value=".java">.java</option>
                <option value=".xml">.xml</option>
                <option value=".jsp">.jsp</option>
                <option value=".html">.html</option>
                <option value=".vue">.vue</option>
            </select>
        </div>
    </div>
</form>

为了让"执行状态"下拉框中的内容与 Vue 中变量 select_status 绑定, 使用 layui-form 的事件监听函数来监控下拉框内容的变动, 当发现内容变动时将变动的结果告诉 Vue 以实现绑定, 代码为

<script>
  layui.use(['form'], function () {
        layui.form.on('select(form_fileName)', function (data) {
            // 下来框改变值 把值赋给vue进行绑定 理解的就是通过layui的监听来实现绑定
            app.$data.genTemplate.fileName = data.value
        })
    })
</script>

2.Vue 向 layui-from 绑定

想要实现的效果是当 Vue 中变量 fileName发生变动时, layui-form 中下拉框的内容同步变动, 创建 Vue 实例的代码如下

// 利用vue的钩子函数重置select 实现逆向绑定
var vm = new Vue({
 updated: function () {
  layui.use('form', function () {
         layui.form.render('select');
     })
 }
})