问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新。

对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新。

那么这里有个问题,在子组件中到底是如何渲染从父组件中传来的数据的?

解决思路

1、用子组件中用watch,确保子组件拿到值

子组件中watch到了数组的变化,将父组件传来的值赋值到子组件上定义的新变量上,子组件再去渲染。没用

2、watch中加nextTick或setTimeout解决异步渲染的问题

没用

3、子组件渲染的变量定义在computed中,依赖父组件传递的这个数据,return直接返回,数据变化,就渲染最新数据

没用

前面三者都是子组件向父组件抛添加事件,在父组件中做添加操作(或在子组件中做添加操作然后数据传给父组件再传给子组件这种骚操作写法),先将数组改变然后再将改变后的值传给子组件去渲染,子组件中容易出现拿到数据不及时渲染的情况。(这里可以研究一下vue是如何在子组件中去渲染拿到的数据的

4、将子组件要渲染的变量定义在computed中,并设置set/get方法,初始时拿到父组件传到props中的数据通过在get中返回,因为在computed中定义了set方法所以可以对变量赋值,子组件中直接对数组添加新值,渲染,然后再通过emit把最新数据抛给父组件。目前想到的最优写法,思路也很清晰。

实际场景:点击弹窗组件中蓝色添加按钮,添加一项表单框,因为这里包含一个二维数组,用第四种方法做是最稳妥的,

参考资料:

vue中如何监听数组的变化:https://juejin.im/post/5ade0e3df265da0b8e7f050b

vue之数据变更没有触发视图更新问题:https://www.cnblogs.com/yy95/p/9872534.html

problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题的更多相关文章

  1. mongodb更新数组元素中的字段,数组$占位符

    pppCodes为数组,PPPCode,expiredOn为数组元素中的字段 db.getCollection('users').findOneAndUpdate({ _id: userId, 'pp ...

  2. arcgis python 使用光标和内存中的要素类将数据加载到要素集 学习:http://zhihu.esrichina.com.cn/article/634

    学习:http://zhihu.esrichina.com.cn/article/634使用光标和内存中的要素类将数据加载到要素集 import arcpy arcpy.env.overwriteOu ...

  3. c#:判断一个数组元素中否有重复元素

    给定一个数组,判定该数组中是否有重复元素. 判定该数组中是否有重复元素总结出以下实现方案: using System; using System.Collections.Generic; using ...

  4. js删除数组元素、清空数组的简单方法

    一.清空数组 ? 1 2 3 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即 ...

  5. IT兄弟连 Java语法教程 数组 深入数组 内存中的数组

    数组是一种引用数据类型,数组引用变量只是一个引用,数组元素和数组变量在内存里是分开存放的.下面将深入介绍数组在内存中的运行机制. 内存中的数组 数组引用变量只是一个引用,这个引用变量可以指向任何有效的 ...

  6. vue中.sync修饰符,实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

  7. 在iOS中求数组元素中最大数与最小数

    之前求数组中某个数中的最大值与最小值.还真一个个比較,后来看到这种方法后,我就醉了 NSArray *testArray = [NSArray arrayWithObjects:@"-2.0 ...

  8. Vue 获取dom元素中的自定义属性值

    方法一: HTML <div id="app"> <button @click="getData($event,'100')">点我&l ...

  9. 读取SequenceFile中自定义Writable类型值

    1)hadoop允许程序员创建自定义的数据类型,如果是key则必须要继承WritableComparable,因为key要参与排序,而value只需要继承Writable就可以了.以下定义一个Doub ...

随机推荐

  1. input 标签的 disabled 和 readonly 属性

    首先这两种属性都会使显示出来的文本框不能输入. disabled 属性:规定禁用 input 元素.被禁用的 input 元素既不可用,也不可点击和编辑,使用 tab 键时将会被跳过,用户的所有操作对 ...

  2. 读懂jquery

    作者:豪情链接:https://www.zhihu.com/question/20521802/answer/25363285来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  3. Win10系列:C#应用控件基础12

    TextBlock控件 TextBlock控件是应用程序开发过程中经常使用的控件之一,它的主要功能是显示一段只读的文本内容.开发者可以使用TextBlock控件来显示提示信息,还可以根据需求将显示的提 ...

  4. 本地jar包安装到本地仓库

    将本地jar包安装到本地仓库中,记得参数上有双引号 mvn install:install-file -Dfile="jar全路径" -DgroupId="groupId ...

  5. 5.使用std的迭代器访问并修改图像

    void Test_ColorReduceByIterator() { Mat g_srcImage=imread("D:\\OpenCV Projects\\OpenCV_Test_Ima ...

  6. PHP输出中文乱码问题解决

    在php文件的最上面加上下面的语句: header('Content-Type: text/html; charset=utf-8');   如下图:

  7. [Go back to REDIS]

    Overview 内存中的数据结构存储系统,可以用作数据库.缓存和消息中间件. redis底层数据结构:跳跃表 [为什么选skiplist而不是red-black tree] 支持多种数据结构:Str ...

  8. MySql5.7 Distinct与Order By同时使用报错的解决方案

    mysql5.7版本中,如果DISTINCT和order by一起使用将会报3065错误,sql语句无法执行.这是由于5.7版本语法比之前版本语法要求更加严格导致的. 解决方案: 1.vim /etc ...

  9. 蓝牙协议分析(5)_BLE广播通信相关的技术分析

    1. 前言 大家都知道,相比传统蓝牙,蓝牙低功耗(BLE)最大的突破就是加大了对广播通信(Advertising)的支持和利用.关于广播通信,通过“玩转BLE(1)_Eddystone beacon” ...

  10. Linux 驱动——Led驱动1

    led_drv.c驱动文件: #include <linux/module.h>#include <linux/kernel.h>#include <linux/init ...