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';//导入 ...
随机推荐
- vue 防抖节流函数——组件封装
防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 节流(throttle) 所谓节流,就是指连续触发事件但是在 ...
- openssl版本升级
1.查看openssl版本 [root@node2 openssh-8.0p1]# openssl version OpenSSL 1.0.1e-fips 11 Feb 2013 2.下载指定版本的o ...
- (ACM模板)不定长数组vector
#include<iostream> #include<cstdio> #include<vector> #include<algorithm> usi ...
- spring cloud学习笔记四 熔断器Hystrix
我们知道分布式服务有这样一个特点,每一个微服务都有自己的业务,并且很多时候一个微服务的业务要依赖于其他微服务,如果这些相互关联的微服务中其中某个微服务请求失败时,就会导致其他调用它的微服务也会请求失败 ...
- VTF/AMROC安装指南
平台 Ubuntu 16.04. 准备工作 安装gfortran 和openmpi sudo apt-get install gfortran sudo apt-get install openmpi ...
- 【leetcode】44. Wildcard Matching
题目如下: 解题思路:本题和[leetcode]97. Interleaving String非常相似,同样可以采用动态规划的方法.记dp[i][j] = 1或者0 表示pattern[0:i]是否匹 ...
- vue-葵花宝典
router-view 中包含 router-view 这种情况就可以 使用嵌套路由了 变化的视图中包含变化的视图 代码层面 router-view 中 包含router-view 路由childre ...
- Laravel框架使用融云服务端SDK
方法一: 使用第三方依赖安装(在项目根目录) 第一步:安装 composer require latrell/rongcloud dev-master 第二步:更新依赖包 c ...
- Python3解leetcode Count Primes
问题描述: Count the number of prime numbers less than a non-negative number, n. Example: Input: 10 Outpu ...
- 【BZOJ2555】SubString(后缀自动机,LCT)
题意:给你一个字符串init,要求你支持两个操作 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 你必须在线支持这些操作. 长度 <= ...