问题描述:将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 对象数组中一项数据改变,页面不更新的更多相关文章

  1. vue向数组中动态添加数据

    vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...

  2. vue 对象数组中,相邻的且相同类型和内容的数据合并,重组新的数组对象

    在项目中,有时候会遇到一些需求,比如行程安排,或者考勤状态.后台返回的获取是这一周的每一天的状态,但是我们前端需求显示就是要把相邻的且状态相同的数据进行合并,所以我们就要重新组合返回的数据.如下所示: ...

  3. Leetcode#442. Find All Duplicates in an nums(数组中重复的数据)

    题目描述 给定一个整数数组 a,其中1 ≤ a[i] ≤ n (n为数组长度), 其中有些元素出现两次而其他元素出现一次. 找到所有出现两次的元素. 你可以不用到任何额外空间并在O(n)时间复杂度内解 ...

  4. 数组:获取数组中最后一个数据end()函数

    今天来学习一下end()函数 1.案例:直接获取数组中最后一个数据 代码部分 结果: 2.案例:从url中获取最后一个数据 代码部分: 结果: 总结: 1.有时候我们需要去获取数据库中,id最大的那个 ...

  5. js对象数组中的某属性值 拼接成字符串

    js对象数组中的某属性值 拼接成字符串 var objs=[ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, {id:4,name:'赵六' ...

  6. 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 ...

  7. react找到对象数组中指定的值

    找到对象数组中指定的值var array = [            { label: "Custom", value: "0" },            ...

  8. Java实现 LeetCode 442 数组中重复的数据

    442. 数组中重复的数据 给定一个整数数组 a,其中1 ≤ a[i] ≤ n (n为数组长度), 其中有些元素出现两次而其他元素出现一次. 找到所有出现两次的元素. 你可以不用到任何额外空间并在O( ...

  9. vue 根据数组中某一项的值进行排序

    一.前言 我在vue项目中遇到了一个表格排序的需求,根据某一项的值的大小从大到小调整数组顺序. 二.代码 表格大概是这个样子,样式和图片在代码中简化了. <table class="r ...

随机推荐

  1. C++进阶--派生类的析构(虚析构函数,shared_ptr)

    //############################################################################ /* 在多态虚基类中声明一个虚析构函数 * ...

  2. python之全局安装包管理工具pip

    1.curl 'https://bootstrap.pypa.io/get-pip.py' > get-pip.py 2.sudo python get-pip.py 3.sudo easy_i ...

  3. this、apply/call、bind、闭包、函数、变量复制

    一.实际场景中抽象出的一个问题 下面this各指向什么? var a = { b: function() { console.log(this); }, f: function() { var c = ...

  4. [转][Centos]常用命令之:ls和cd

    来自:https://www.cnblogs.com/zerotomax/p/7224927.html ls 类似于 dir 在使用centos这个linux系统的时候,我们总是免不了需要查看当前目录 ...

  5. mysql锁文章

    http://www.genshuixue.com/i-cxy/p/15285416 http://blog.csdn.net/hw_libo/article/details/39080809 htt ...

  6. switch语句的功能是否完全可以使用if else多选择结构来代替?如果是,为什么还需要switch结构?

  7. [UE4]一个好用的虚幻4插件,根据资源名称动态加载资源,GetCurrentLeveName(获得当前地图名称)

    下载地址 一.下载与UE4相对应的版本 二.在工程根目录新建Plugins目录,解压插件. 三.如果工程已经打开,则需要重新打开   四.重新打开工程后,右下角会有提示有新插件可用. 五.这个插件提供 ...

  8. mvc5总结(1)

    1.Global.asax 全局的启动项,初始化相关配置 2.路由,按照默认规定请求就行,没必要扩展太多 3.区域路由,当我们想命名相同的controller和action时,结合命名空间使用 pub ...

  9. SCCM 2012 R2实战系列之八:OSD(上)--分发全新Windows7系统

    今天将跟大家一起分享SCCM 中最为重要的一个功能---操作系统分发(OSD),在此文章中会讨论到OSD的初始化配置.镜像的导入.任务序列的创建编辑.并解决大家经常遇到的分发windows7系统分区盘 ...

  10. PHP正则配合写配置文件导致Getshell

    PHP正则配合写配置文件导致Getshell,偶然间看到的一个题目, p 牛的小密圈的一个问题. 分析一下,漏洞代码: index.php <?php $str=addslashes($_GET ...