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. antd desgin vue 报错 Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

    警告:表的数据源中的每条记录都应该有一个唯一的“key”道具,或者将表的“rowKey”设置为一个唯一的主键, 只需要添加 :rowKey="record => record.id&q ...

  2. 一、RabbitMQ安装与测试连接

    一.下载NuGet支持的RabbitMQ.Client客户端库与安装RabbitMQ服务. 1.安装客户端库操作服务. 2.安装服务. 步骤一.下载Erlang. 步骤二.下载RabbitMQ服务 采 ...

  3. [SDOI2017]数字表格 (莫比乌斯反演)

    链接:https://ac.nowcoder.com/acm/problem/20391来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  4. 洛谷 P2863 [USACO06JAN]牛的舞会The Cow Prom(Tarjan)

    一道tarjan的模板水题 在这里还是着重解释一下tarjan的代码 #include<iostream> #include<cstdio> #include<algor ...

  5. 【Leetcode周赛】从contest-71开始。(一般是10个contest写一篇文章)

    Contest 71 () Contest 72 () Contest 73 (2019年1月30日模拟) 链接:https://leetcode.com/contest/weekly-contest ...

  6. gelera集群详解

    [MySQL]galera集群原理简介   特性 基于行复制的完全并行同步复制实时多主架构,任意节点可读写无延迟复制,事务零丢失,可靠健壮的读写体验.自动化节点关系控制:节点故障自动摘除,节点加入自动 ...

  7. [CentOS]安装软件:/lib/ld-linux.so.2: bad ELF interpreter 解决

    错误:/usr/local/bin/rar: /lib/ld-linux.so.2: bad ELF interpreter: No such file or directory 解决:是因为64位系 ...

  8. Gene Ontology (GO) 注释

    Gene Ontology (GO) 注释  Posted on 2017-06-11 |  In 生信 相似的基因在不同物种中,其功能往往保守的.显然,需要一个统一的术语用于描述这些跨物种的同源基因 ...

  9. HAProxy基于Centos6.5安装及配置

    一.使用2.6内核Linux,配置sysctl参数 vi /etc/sysctl.conf #haproxy confignet.ipv4.tcp_tw_reuse = 1net.ipv4.ip_lo ...

  10. Linux 统计文件夹下文件个数及目录个数

    1. 统计文件夹下文件的个数 ls -l | grep "^-" | wc -l 2.统计文件夹下目录的个数 ls -l | grep "^d" | wc -l ...