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

  

vue中给请求来的数据List ,添加属性false 后,赋值不上问题解决办法的更多相关文章

  1. vue中给请求到的数据对象加属性问题

    今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...

  2. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  3. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  4. vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'

    vue教程2-05 v-for循环 重复数据无法添加问题  加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...

  5. Vue中实现与后台的数据交换(vue-resource)

    vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打 ...

  6. MySQL数据库中tinyint类型字段读取数据为true和false (MySQL的boolean和tinyint(1))

    数据库一个表中有一个tinyint类型的字段,值为0或者1,如果取出来的话,0会变成false,1会变成true. MySQL保存boolean值时用1代表TRUE,0代表FALSE.boolean在 ...

  7. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

  8. 解决在vue中axios请求超时的问题

    查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...

  9. vue本地设置请求接口及数据

    1.安装axios yarn add axios 2.在入口文件main.js中设置 import { getRequest, postRequest} from './libs/api';//导入 ...

随机推荐

  1. 【学习总结】GirlsInAI ML-diary day-21-初识 Numpy, Matplotlib, Seanborn [柱状图、折线图、箱图]

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day21 初识 Numpy, Matplotlib, Seanborn [柱状图.折线图.箱图] 一.Titanic练习赛 ...

  2. vue动态设置Iview的多个Input组件自动获取焦点

    1.html,通过ref=replyBox设置焦点元素,以便后续获取 // 动态设定自动获取焦点按钮 <p class="text-right text-blue fts14 ptb1 ...

  3. 20180209-shutil模块

    下面讲解shutil模块的相关操作: 1.shutil.copyfileobj(fsrc, fdst, length=16*1024) 将fsrc文件内容拷贝到fdst文件中,length是指一次拷贝 ...

  4. Mac版Navicat Premium激活教程

    工具: Navicat Premium12.0.20 安装包 下载注册机工具包 链接:https://pan.baidu.com/s/1NS8gk780ds1Xn-zHrSIzIw  密码:dvke ...

  5. jenkins部署的零碎知识

    环境要求 1)版本控制子系统(SVN):SVN服务器.项目对应版本库.版本库中钩子程序(提交代码后,触发Jenkins自动打包并部署到应用服务器)(2)持续集成子系统(存在Jenkins的服务器):J ...

  6. javaScript的预加载

    在有大量图片的页面中,为了避免页面加载完图片还未加载完成,我们通常会使用js的图片预加载. 这是一个预加载的demo: 首先把图片放入到一个类名为imgSrcArr的变量当中: var imgSrcA ...

  7. 6层PCB设计技巧和步骤

    6层PCB设计技巧和步骤 一.原理图的编辑  6层板由于PCB板中可以有两层地,所以可以将模拟地和数字地分开.对于统一地还是分开地,涉及到电磁干扰中信号的最小回流路径问题,绘制完原理图,别忘检查错误和 ...

  8. boost heap

    1. using boost::heap::priority_queue #include <boost/heap/priority_queue.hpp> #include <ios ...

  9. Mybatis原理及源码分析

    什么是Mybatis? Mybatis是一个半自动化的持久层框架. Mybatis可以将向PreparedStatement中的输入参数自动进行映射(输入映射),将结果集映射成Java对象(输出映射) ...

  10. iOS开发环境搭建 及 编写1个hello world

    参照: https://www.cnblogs.com/ansersion/p/9084460.html 前置条件 : MAC一台 安装xcode,从appstore 下载 xcode,(6G多,考验 ...