• vue中给请求来的数据List ,添加属性false 后,赋值不上问题解决办法


     data() {
            return {
                list:[
                    // 添加属性fale 后的值
                    
                ],
                // 测试数据
                goList:[
                    {
                        name:'张三',
                        phone:'18621958665'
                    },
                    {
                        name:'李四',
                        phone:'18621958665'
                    },
                    {
                        name:'张er',
                        phone:'18621958665'
                    },
                    {
                        name:'李wu',
                        phone:'18621958665'
                    }
                ],
                routerList:[]
            }
        },
    

      

    // 数据请求
    getAjax(){
                const _this = this
                // _this.postRequest('‘, {}, function (data) {
                //         console.log(data, '111')
                //         if (data) {
                //             data.map(val => {
                //                 val.check = false ;
                //                 _this.list.push(val)
                //             })
                //         }else{
                //             _this.$Toast({
                //                 message: '请选择使用人',
                //                 duration: 2000,
                //                 className: 'noticeErrorToast'
                //             });
                //         }
                // })
    
               _this.goList.map(val => {
                            val.check = false ;   // 添加属性
                            _this.list.push(val)
                })
            },
    

      

    // 点击切换选中
            goChecked(item,index){
                const _this = this ;
                // 第二种
                // this.$set(item,'check',!item.check)   //undefined  直接转化true
    
                //第一种
                item.check = !item.check ;
                this.list.splice(index,1,item);   // 有将当前的直接改变掉,替换掉
                if(item.check){
                    this.routerList.push(item)
                }else{
                    this.routerList.splice(index,1)
                }
                console.log(this.routerList)    // 获取到当前选中的值
            },
    

      多选按钮点击事件html:

    <section class="registrationList">
               <ul v-for="(item,index) in list" :key="index">
                   <div>
                       <img src='../../../../static/img/show/checkedImg.png' v-if="item.check "  @click='goChecked(item,index)'/>
                       <img src='../../../../static/img/show/noneChecked.png' v-if="!item.check " @click='goChecked(item,index)'/>
                   </div>
                   <div @click="goEdit">
                        <li class="firstLi">{{item.name}}</li>   
                        <li class="secondLi">{{item.phone}}</li>  
                   </div>
                     
               </ul>
          </section>
    

      css:

    .registrationList{
         100%;
        box-sizing: border-box;
        padding: 20px 0 20px 20px ;
    }
    .registrationList ul{
       100%;
      box-sizing: border-box;
      padding:20px 0 ;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
    }
    .registrationList ul div:first-of-type{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
    }
    .registrationList li{
        100%;
       box-sizing: border-box;
       line-height: 50px;
       text-align: left;
    }
    .registrationList img{
        vertical-align: middle;
         36px;
        height: 36px;
    }
    .firstLi{
        font-size: 34px;
        color:black;
    }
    .secondLi{
        font-size: 28px;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(153,153,153,1);
    }
    

      

  • 相关阅读:
    12、mybatis学习——mybatis懒加载的设置
    11、mybatis学习——自定义结果映射resultMap以及关联查询
    10、mybatis学习——sqlmapper配置返回list和map结果集
    9、mybatis学习——sqlmapper配置中#{}和${}的区别
    8、mybatis学习——sqlmapper配置文件参数处理(单个参数,多个参数,命名参数)
    7、mybatis学习——mybatis基础增删改&&mybatis获取自增主键
    6、mybatis学习——mapper映射配置
    5、mybatis学习——mybatis多数据库厂商支持
    [20180927]ora-01426.txt
    [20180928]ora-01426(补充).txt
  • 原文地址:https://www.cnblogs.com/panax/p/11793317.html
Copyright © 2020-2023  润新知