vue in to a data request to the List, after adding attributes false, no assignment on solutions to problems

Data () { 
        return { 
            List: [ // add an attribute value Fale 
            ], 
            // test data 
            goList: [ 
                { 
                    name: 'John Doe', 
                    Phone: '18,621,958,665' 
                }, 
                { 
                    name: 'John Doe', 
                    Phone : '18,621,958,665' 
                }, 
                { 
                    name: 'Zhang ER', 
                    Phone: '18,621,958,665' 
                }, 
                { 
                    name: 'Li Wu', 
                    Phone: '18,621,958,665'
                }
                
                
            ],
            routerList:[]
        }
    },

  

// Data Request 
getAjax () { 
            const = _this the this 
            // _this.postRequest ( '', {}, function (Data) { 
            // the console.log (Data, '111') 
            // IF (Data) { 
            // Data.Map (Val => { 
            // = val.check to false; 
            // _this.list.push (Val) 
            //}) 
            // the else {} 
            . $ // _this Toast ({ 
            // Message: 'Please select using human ', 
            // DURATION: 2000, 
            // className:' noticeErrorToast ' 
            //});
            } //
            } //) 

           _this.goList.map (Val => { 
                        val.check = to false;    // add attributes 
                        _this.list.push (Val) 
            }) 
        },

  

// switch to select Click 
        goChecked (Item, index) { 
            const = _this the this; 
            // second 
            . // this $ set (! Item , 'check', item.check) // undefined directly converted to true 

            // first species 
            ! item.check = item.check; 
            this.list.splice (index,. 1, Item);    // change will have a direct current off, replace 
            IF (item.check) { 
                this.routerList.push (Item) 
            the else {} 
                this.routerList.splice (index,. 1) 
            } 
            the console.log (this.routerList)     // Get the current value of the selected 
        },

  Multiple-choice button click event 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);
}

  

Guess you like

Origin www.cnblogs.com/panax/p/11793317.html
Recommended