layui vue 在一起用的坑 select

最新推荐文章于 2024-08-21 09:02:46 发布

baobaosun3271

最新推荐文章于 2024-08-21 09:02:46 发布

阅读量2.3k

点赞数

文章标签： vue layui

本文链接：https://blog.csdn.net/qq_27315289/article/details/88912833

版权

在将layui与Vue结合使用时遇到一个问题，即在同一个页面上使用多个select组件时，第二个组件会错误地显示第一个组件的下拉选项。通过阅读文档和试验，发现Vue为了提高效率会复用元素，这导致了问题的发生。解决办法是在使用v-if的select元素上添加独特的key属性，如key='1'，确保每个select的key不同，从而避免layui和Vue的冲突。尽管这种方式有效，但作者对于layui底层如何选择元素以及Vue的高效渲染机制仍感到困惑。

摘要由CSDN通过智能技术生成

问题是这样的，


    <div class="layui-btn-group">
        <button class="layui-btn " @click="businessChange('bc01')"
                :class="business=='bc01'?'layui-btn-normal':'layui-btn-primary'">1
        </button>
        <button class="layui-btn " @click="businessChange('bc02')"
                :class="business=='bc02'?'layui-btn-normal':'layui-btn-primary'">2
        </button>
    </div>
    <div v-if="business=='bc02'" >
        <div class="layui-form pt20">
            <div class="layui-row  layui-form-item layui-col-space8">
                <div class="layui-col-md3">
                    <label class="layui-form-label lg-la