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';//导入 ...
随机推荐
- 8VC Venture Cup 2017 - Elimination Round - C
题目链接:http://codeforces.com/contest/755/problem/C 题意:PolandBall 生活在一个森林模型的环境中,定义森林由若干树组成,定义树为K个点,K-1条 ...
- Spring-quartz定时系统多任务配置
<!-- 启动触发器的配置开始 --> <bean name="startQuertz" lazy-init="false" autowire ...
- JavaSE---JDK提供的命令行工具---javap
1.javap 1.1 javap是JDK自带的反解析工具: 1.2 作用:就是根据class字节码文件,反解析出 当前类 对应的code区(汇编指令).本地变量表.异常表和代码行偏移量映射 ...
- ASP.NET MVC中的捆绑和压缩技术
概述 在众多Web性能优化的建议中有两条: 减少Http请求数量:大多数的浏览器同时处理向网站处理6个请求(参见下图),多余的请求会被浏览器要求排队等待,如果我们减少这些请求数,其他的请求等待的时间将 ...
- 偏函数(partial)
from functools import partial def add(a,b,c,d): return a+b+c+d add = partial(add,1,2) print(add(3,4) ...
- SpringMvc中乱码问题的解决
一:如果是前台传递的数据有问题. 在tomcat的service.xml中加上: URIEncoding="UTF-8" <Connector URIEncoding=&qu ...
- SQL Server索引管理之六大铁律
索引是以表列为基础的数据库对象.索引中保存着表中排序的索引列,并且纪录了索引列在数据库表中的物理存储位置,实现了表中数据的逻辑排序.通过索引,可以加快数据的查询速度和减少系统的响应时间;可以使表和表之 ...
- 三、PCB设计与Allegro基本概念
PCB:印制电路板 如--update更新时无法变为0 4.区域规则--设置区域规则--赋予区域轮廓 5.铜皮 把.sav改为.dsn--就可以恢复出突然关闭的.dsn文件 生成规则钻孔文件(.drl ...
- python 简单抓取网页并写入excel实例
# -*- coding: UTF-8 -*- import requests from bs4 import BeautifulSoup import xlwt import time #获取第一页 ...
- 数据中 int 转 double 方式
在mysql 中,得出一个int整数型数值 int整数值/int整数值 在被引用时,发现还是int类型 但是实际需要转换为 double 小数类型 查看相关函数,没有找到好的方法 后采用了 rou ...