layui vue 在一起用的坑 select

全栈程序员站长

发布于 2022-09-07 15:54:15

5170

发布于 2022-09-07 15:54:15

大家好，又见面了，我是你们的朋友全栈君。

问题是这样的，

    <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-label">2<i class="cred">*</i>：</label>
                    <div class="layui-input-block">
                        <div class="layui-col-md7">
                            <input type="text" class="layui-input" lay-verify="required"
                                   v-model="serviceDefense" title="111" key="username-input">
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div v-else-if="business=='bc01'" >
        <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-label">机房：</label>
                    <div class="layui-input-block">
                        <select type="text" class="layui-select" name="select_computerRoomOne"
                                lay-filter="select_computerRoomOne" lay-verify="required"  title="1">
                            <option value="">请选择机房111</option>
                            <option v-for="(item,index) in oneRoomList"  :value="item.id">{
  
  {item.roomName}}</option>
                        </select>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    var form;

    function cb() {
        layui.use(['form'], function () {
            form = layui.form
        })
    }

    var vm = new Vue({
        el: "#app",
        data: {
            business: "bc01",//业务配置
            oneRoomList: [{
                id:1,
                roomName:"11"
            }],
            twoRoomList: [],
            oaOrderMaster: {

            },
            serviceDefense:"ss"
        },
        methods: {
            businessChange: function (type) {
                this.business = type;
                this.$nextTick(function () {
                    form.render()
                })
            }
        },
        mounted() {
            cb();
        }
    })
</script>

第一个显示正常，第二个无缘无故多了个第一个的下拉框，经过尝试有和看文档后解决了，但还是懵懵懂懂不知说依然，

用 `key` 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

也不知道layui底层是怎么选择元素的，vue的if高效但是有时候也是麻烦

解决办法就是在v-if 加个key=’1′,每个都不一样然后把

v-for="(item,index) in oneRoomList" 改成

v-for="item in oneRoomList"

不知道为什么这只是个索引啊

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/152835.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年6月2，如有侵权请联系 cloudcommunity@tencent.com 删除

java

https

网络安全

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度