vue+layui+select遇到的1个奇葩bug，坑了我好几天

版权声明：小雷FansUnion的版权声明 https://blog.csdn.net/FansUnion/article/details/83040180

<div class="layui-form-item">
                       <label class="layui-form-label">业务</label>     
                     <div  class="layui-input-inline">
                        <select v-model="photoQuery.type" id="photoType">
                           <option value="">请选择</option>
                           <option v-for="photoTypeEnum in photoTypeList" 
                                 :value="photoTypeEnum.code">

                             {{photoTypeEnum.value}}</option>
                           </select>
                     </div> 

静态select，没毛病

     <label class="layui-form-label">频道</label>     
                       <div class="layui-input-inline"> 
                        <select  id="channel">
                           <option value="">请选择</option>
                           <option value="20">媒体报道</option>
                           <option value="30">网站公告</option>
                         </select>
                    </div> 

后台模版渲染，肯定不会存在问题。

layui-input-block没问题，但是发现“文字”总是位于中间。

最开始以为是，居中对齐导致的。

手动设置text-align左对齐，还是不行。

layui-input-inline改为layui-input-block

所以，最开始怀疑是 vue和layui不兼容导致的。

但是，网上找到了很多答案，都说是layui.form手动渲染，确实也渲染了。

大家都没有遇到的问题，就自己遇到了，总是有哪个地方有点问题。

看了几百次之后。。。

猛然间发现，是空格导致的。

正确的写法：

<select v-model="photoQuery.type" id="photoType">
                           <option value="">请选择</option>
                           <option v-for="photoTypeEnum in photoTypeList" 
                                 :value="photoTypeEnum.code">{{photoTypeEnum.value}}</option>
                           </select>

吃过亏，才记忆深刻。