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);
}
vue中给请求来的数据List ,添加属性false 后,赋值不上问题解决办法的更多相关文章
- vue中给请求到的数据对象加属性问题
今天发现了个很奇怪的问题,我在做一个:点击列表 使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue 中监测滚动条加载数据(懒加载数据)
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'
vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...
- Vue中实现与后台的数据交换(vue-resource)
vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打 ...
- MySQL数据库中tinyint类型字段读取数据为true和false (MySQL的boolean和tinyint(1))
数据库一个表中有一个tinyint类型的字段,值为0或者1,如果取出来的话,0会变成false,1会变成true. MySQL保存boolean值时用1代表TRUE,0代表FALSE.boolean在 ...
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
- 解决在vue中axios请求超时的问题
查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...
- vue本地设置请求接口及数据
1.安装axios yarn add axios 2.在入口文件main.js中设置 import { getRequest, postRequest} from './libs/api';//导入 ...
随机推荐
- resolver - 解析器(resolver) 配置文件
总览 (SYNOPSIS) /etc/resolv.conf 描述 (DESCRIPTION) 解析器(resolver) 是 C 函数库 中 的 一组 例程, 用于 访问 Internet 域名系统 ...
- smbsh - 允许用UNIX命令访问NT文件系统
总览 smbsh 描述 此程序是Samba套件的一部分. smbsh允许你用UNIX命令诸如ls,egrep和rcp等来访问NT文件系统.必须用动态链接的shell以便使smbsh工作正常. 从命令提 ...
- Fabric管理组件的使用
Fabric的官方网站: http://www.fabfile.org 帮助文档: https://fabric-chs.readthedocs.io/zh_CN/chs/tutorial.html ...
- getString()方法与getObject()方法的区别
JDBC提供了getString().getInt()和getData()等方法从ResultSet中获取数据,当查询结果集中的数据量较小时,不用考虑性能,使用这些方法完全可以满足需求,但是当Resu ...
- WriteDataToFile(filename,pJsonData,strlen(pJsonData)+1)
WriteDataToFile(filename,pJsonData,strlen(pJsonData)+1) 字节流的长度计算 发送的txt 文件是对的 zip exe出现字节计算错误 strlen ...
- phpstorm git配置
一. 安装git apt-get install git 二. 选择file->setting->Version Control->git 在此输入框输入git的执行路径 三.配置g ...
- phpstrom 安装
环境: ubuntu18.4 一. 安装 1. 下载安装包.tar.gz 下载地址:https://www.jetbrains.com/phpstorm/download/#section=linux ...
- C# json对象中包含数组对象时,如何存入数据库
前端创建的的对象例如: C#端这样将数组提取出来存入
- php 系统函数
realpath();//测试和文档解释不同,可以判断文件是否存在,存在返回路径否则返回false rtrim("Hello World",’d‘);//可以删除指定字符串
- paper 168: 2018-FATTEN 论文解析-feature space transfer for data augmentation
paper download:https://arxiv.org/abs/1801.04356 本文的核心就是使用GAN网络生成新的数据. 这个总体框图,常规结构,具体是通过在appearance和p ...