最近在开发的项目中,使用了下vue,vue开发效率是高了不少,但是也遇到了一些问题,特此记下.

前言

现在开发的项目益达同学是中途加入的,项目的后端使用的java Scala,前端是在网上买了一个模板(在我来之前)

正文

目前在写一个多级账户管理功能,其中有个需求是这样的,就是添加用户编辑用户使用同一个页面

添加用户页面

添加用户页面

编辑用户页面

编辑用户

看着其实是很简单的,因为之前写这种表单都是用原生的js/jq来写,可以说是已经写烦了,然后打算用vue来写下,顺带学习学习

可以说vue用起来还是很爽的,各种双向绑定,但是在下面的单选组中使用v-model绑定数据就出现了问题,代码如下:

<!--html-->

 <label class="radio-inline">
  <input type="radio" name="optionsRadios"   value="Global_Admin"  v-model="role"  > 超级管理员
</label>
<label class="radio-inline">
  <input type="radio" name="optionsRadios"   value="Department_Manager"  v-model="role"  v-on:click="fetchBusiness()"> 业务部门管理员
</label>
<label class="radio-inline">
  <input type="radio"  name="optionsRadios"  value="Robot_Admin" v-model="role"  v-on:click="fetchBusiness()"> 机器人管理员
</label>
<!--javascript-->


var app = new Vue({
    el: '#userForm',
    data: {
        role: "",//所选角色
       
    },
    created:function () {
        var that =this;
        var currentID = $.getUrlParam('id');
        that.session_roles = session.roles;
      
        if(currentID == null){
            <!--添加-->
        }else{
           <!--编辑-->
            // 获取选中的角色
            CommonUtil.postJson('/cloud/user/getUser',{"userId":currentID},function (data) {
                if(data.status){
                   console.log(data);
                   var res = data.data;
                   that.role = res.roles[0];
                   console.log(that.role+"----------------人员角色")
                }else{
                    layer.msg(data.msg);
                }
            })
        }
      
    },
    methods:{
      
      
    }
    })

刷新页面如图

MD,数据都打印出来了,竟然绑定不上,这个时候我还以为是我代码写错了,带我检查完后,发现还是不行,然后我又重新写了个demo,发现可以,代码一模一样

demo是在codepen上的,点击查看

这个时候我意识到了很大的问题,可能是这个项目main文件引入的js和vue冲突了

main文件引入如下图

这个时候我的处理方法如下(chrom):

  1. 打断点

打断点的依据就是,别的js文件在vue操作radio dom树的同时,它也操控了radio dom

悲剧的是,我刷新下页面.竟然么有break,这个时候我真的想问,TM的到底是谁???

  1. 巧用chrom开发者模式下Seach

苍天不负有心人,终于找到了可能是罪魁祸首的文件,下面来看下它的源码:


 var handleUniform = function() {
        if (!$().uniform) {
            return;
        }
        var test = $("input[type=checkbox]:not(.toggle, .md-check, .md-radiobtn, .make-switch, .icheck), input[type=radio]:not(.toggle, .md-check, .md-radiobtn, .star, .make-switch, .icheck)");
        if (test.size() > 0) {
            test.each(function() {
                if ($(this).parents(".checker").size() === 0) {
                    $(this).show();
                    $(this).uniform();
                }
            });
        }
    };
    

注意:

var test = $("input[type=checkbox]:not(.toggle, .md-check, .md-radiobtn, .make-switch, .icheck), input[type=radio]:not(.toggle, .md-check, .md-radiobtn, .star, .make-switch, .icheck)");

然后修改html代码如下:

  <label class="radio-inline">
      <input type="radio" class="toggle" name="optionsRadios"   value="Global_Admin"  v-model="role"  > 超级管理员
  </label>
  <label class="radio-inline">
      <input type="radio" class="toggle" name="optionsRadios"   value="Department_Manager"  v-model="role"  v-on:click="fetchBusiness()"> 业务部门管理员
  </label>
    <label class="radio-inline">
      <input type="radio" class="toggle" name="optionsRadios"  value="Robot_Admin" v-model="role"  v-on:click="fetchBusiness()"> 机器人管理员
    </label>

和上面相比,就是多了个类名toggle,最后,radio乖乖的给我选中了,哈哈哈

最后

这次的bug让我受益颇多,我才知道为什么那么的web开发者喜欢用Chrome,不仅仅只是兼容性,更多是良心工具

文末,益达同学不善文笔,写作或许让你不懂,可发邮件电邮我呃~

欢迎各种交友骚扰~

欢迎加入大前端圈子 大前端~

大家一起交流web前端,不止于技术~

mailto: extrastu888@gmail.com


扫描二维码,在手机上阅读!