[ 记录 ] Vue 对象数组中一项数据改变,页面不更新
问题描述:将data中数据列表渲染到页面,循环生成 el-switch,点击页面中 el-switch 后数组中某项值改变,但是页面不更新
数据格式如下
export default{
data(){
list : [
{
id : 1,
selected : true,
title : 'aaa'
},
{
id : 2,
selected : false,
title : 'bbb'
},
{
id : 3,
selected : true,
title : 'ccc'
}
]
}
}
原因是因为 利用索引直接设置一个项值之后,Vue不能检测到数据变化 详情参考:https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
同时官方也提供了相应的api来解决这个问题
vm.$set(vm.items, indexOfItem, newValue)
[ 记录 ] Vue 对象数组中一项数据改变,页面不更新的更多相关文章
- vue向数组中动态添加数据
vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...
- vue 对象数组中,相邻的且相同类型和内容的数据合并,重组新的数组对象
在项目中,有时候会遇到一些需求,比如行程安排,或者考勤状态.后台返回的获取是这一周的每一天的状态,但是我们前端需求显示就是要把相邻的且状态相同的数据进行合并,所以我们就要重新组合返回的数据.如下所示: ...
- Leetcode#442. Find All Duplicates in an nums(数组中重复的数据)
题目描述 给定一个整数数组 a,其中1 ≤ a[i] ≤ n (n为数组长度), 其中有些元素出现两次而其他元素出现一次. 找到所有出现两次的元素. 你可以不用到任何额外空间并在O(n)时间复杂度内解 ...
- 数组:获取数组中最后一个数据end()函数
今天来学习一下end()函数 1.案例:直接获取数组中最后一个数据 代码部分 结果: 2.案例:从url中获取最后一个数据 代码部分: 结果: 总结: 1.有时候我们需要去获取数据库中,id最大的那个 ...
- js对象数组中的某属性值 拼接成字符串
js对象数组中的某属性值 拼接成字符串 var objs=[ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, {id:4,name:'赵六' ...
- LeetCode 442. 数组中重复的数据(Find All Duplicates in an Array) 17
442. 数组中重复的数据 442. Find All Duplicates in an Array 题目描述 Given an array of integers, 1 ≤ a[i] ≤ n (n ...
- react找到对象数组中指定的值
找到对象数组中指定的值var array = [ { label: "Custom", value: "0" }, ...
- Java实现 LeetCode 442 数组中重复的数据
442. 数组中重复的数据 给定一个整数数组 a,其中1 ≤ a[i] ≤ n (n为数组长度), 其中有些元素出现两次而其他元素出现一次. 找到所有出现两次的元素. 你可以不用到任何额外空间并在O( ...
- vue 根据数组中某一项的值进行排序
一.前言 我在vue项目中遇到了一个表格排序的需求,根据某一项的值的大小从大到小调整数组顺序. 二.代码 表格大概是这个样子,样式和图片在代码中简化了. <table class="r ...
随机推荐
- git clone 指定分支 拉代码
1.git clone 不指定分支 git clone http://10.1.1.11/service/tmall-service.git 2.git clone 指定分支 git clone -b ...
- 【转】hive中UDF、UDAF和UDTF使用
原博文出自于: http://blog.csdn.net/liuj2511981/article/details/8523084 感谢! Hive进行UDF开发十分简单,此处所说UDF为Tempora ...
- Scala中的柯里化
一.初识Currying柯里化 柯里化(Currying)技术 Christopher Strachey 以逻辑学家 Haskell Curry 命名的(尽管它是 Moses Schnfinkel ...
- flume-sink
概述 从Flume Agent移除数据并写入到另一个Agent或数据存储或一些其他存储系统的组件被称为sink.Sink不断的轮询channel中的事件且批量的移除它们.这些事件批量写入到存储或索引系 ...
- 服务网关zuul之四:zuul网关配置
禁用过滤器在Zuul中特别提供了一个参数来禁用指定的过滤器,该参数的配置格式如下:zuul.AccessFilter.pre.disable=true动态加载动态路由通过结合Spring Cloud ...
- 还在用慢的要死的百度网盘?来试试这款12.5M下载速度的免费网盘吧!
我们都知道云存储,如谷歌云端硬盘,苹果的icloud, 微软的OneDrive. 它们是用于数据备份和与多设备同步的云存储. 虽然它被广泛使用,但是还是有一些缺点,以谷歌云端硬盘为例: 1. 如果你需 ...
- [UE4]Grid Panel
一.使用Grid Panel可以做出类似暗黑3一样的物品栏:不同的物品栏占据的物品栏格子不一样. 二.GridPanel.FillRules,可以设置每个单元格内的控件是否是拉伸比重.注意:这个是Gr ...
- Centos7修改系统时区timezone
第一步:查询服务器时间 [root@localhost ~]# timedatectl Local time: Sat 2018-03-31 01:11:46 UTC Universal time: ...
- Spring Boot安装及入门实现
在Eclipse里使用Spring boot,首先需要安装Spring boot的插件STS. 注意:STS插件3.7.0以上版本启动需要JDK1.8 打开Eclipse 菜单栏 Help -> ...
- centos 7怎么通过图形界面来配置静态ip
除了通过修改配置文件的方法来配置静态ip,我们还可以通过图形界面来配置,这样做其实更加方便一点 先进入设置页面 选择网络 我这里是通过有线上网的,我们之间修改配置就可以了 选择ipv4,和manual ...