使用vue对select做数据绑定的时候出问题了,原来是layui的样式问题

avatar

源码

<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<form class="layui-form">
    <div class="layui-inline">
        <select v-model="rownum" name="rownum" id="rownum">
                <option disabled value="">数据量</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="200">200</option>
        </select>
        <span>rownum:{{rownum}}</span>
    </div>
</form>
<script src="../../lib/vue/vue.min.js" charset="utf-8"></script>
<script>
layui.extend({
    admin: '{/}../../static/js/admin'
});
var appVue = new Vue({
    el: '#redis-app',
    data: {
        rownum: ''
    }
});
</script>

然后选择select,下面不显示出来选择的数据,查原因才发现,原来是 layui-form 的问题,它把select的外观美化了,不是原生的select了,所以vue就拿不到数据了,把 layui-form 去掉这问题就好了

另外,把layui换成bootstrap,select加上bootstrap的样式 form-control 是没有问题的

猜测:估计是layui把option给换成div之类的来实现的才出现的问题,bootstrap美化的只是select,没有动option的样式(其实css也改不了option的样式)

目前还没有回答,快来帮帮TA吧!
添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录