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{
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0 20px 20px ;
}
.registrationList ul{
  width: 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{
   width: 100%;
   box-sizing: border-box;
   line-height: 50px;
   text-align: left;
}
.registrationList img{
    vertical-align: middle;
    width: 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);
}

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM