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); }