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); }
作者:人参,每篇随笔皆原创(除非注明原作者的随笔),欢迎指正!