1、组件内部,属性值地址空间内引用地址改变,DOM不能渲染。

问题举例:this.items = [[],[],[],[]]

1、在items 中,修改任意一项数组中的值,DOM是不会更新的,
2、解决方案: this.items = [...this.items]。通过解构赋值,重新给items赋值。
2、组件之间传值,父组件传data改变,子组件未更新。

1、子组件中在mounted中对父组件传的值,进行了判断等相关处理,通过改变子组件自身定义的状态实现效果。

此时,父组件值更新,子组件不重新渲染,是因为,父组件值改变子组件不会走mounted的生命周期。

处理方案:
使用watch监听父组件传的值,当值改变的时候,进行对应操作。
2、推荐使用:
子组件中直接使用父组件传的值,如需类型转换或者简单判断,直接通过三目运算符判断使用,就省去了对 父组件传值的监听步骤。

vue(数据改变,DOM不渲染问题)的更多相关文章

  1. vue 数据改变但是视图没更新

    在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...

  2. vuetify.js框架 下拉框数据改变DOM原数据未清除

    今天遇到一个奇怪的bug 需求很简单,就是将“引擎能力”下拉框选中的值作为筛选条件传入到“样本类型”下拉框中,默认“样本类型”下拉框显示所有样本类型 看图: 如图所示,功能很简单. 其实还是对vuet ...

  3. vue数据修改 但未渲染页面

    1. 普通的 `1.1 this.$set('obj',key,value); 1.2 this.splice(); 2.数据层次太多,没有触发render函数进行自动更新,需手动调用: this.$ ...

  4. vue中的dom基本渲染

    一.输出动态标签请只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值,容易导致xss攻击. <div id="J_app"> <div v-html=& ...

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

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  6. vue中改变数组或对象,页面没做出对应的渲染

    原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...

  7. Vue源码探究-虚拟DOM的渲染

    Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...

  8. vue父组件数据改变,子组件数据并未发生改变(那是因为你没写监听)附带子组件的写法

    下面的代码有 父组件有三个按钮,年.月.日 点击之后父组件的数据发生改变,子组件却没改变,打印接受的数据,除了第一次其他都没打印,那是因为你没有写监听 <template> <div ...

  9. Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()

    虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...

随机推荐

  1. Windows网络编程:winsock文件传输范例

    基于TCP流协议的winsock网络文件传输Demo: 实现:C语言 功能:文件传输(可以传任何格式的文件) /******************************************** ...

  2. MariaDB ----单表查询

    1>按一定条件查询某字段的数据 (where) ; ( 查询 id > 的数据) #补充: ; 注意“ select * from  students1:  (此命令需谨慎使用, 数据量大 ...

  3. 三元表达式之理解/jquery源代码分析之$.inArray实现

    每次看到三元表达式就会惶惶然分不清怎样读,正如语文中的断句一样,jquery源代码中的三元表达式更是不知怎样断句. 附jquery中的inArray实现. 大家熟悉jquery的应该都不陌生inArr ...

  4. TypeError: db.addUser is not a function : @(shell):1:1 ——mongoDB创建新用户名密码的方法

    不多说,旧版本使用 db.addUser("root","root") 新版本使用这句会出现这个错误提示 TypeError: db.addUser is no ...

  5. [Other]面试复习笔记:线程与进程复习

    基本概念 1. 进程的基本概念 线程(thread)是进程(processes)中某个单一顺序的控制流,也被称为轻量进程(lightweight processes).进程是表示资源分配的基本单位,又 ...

  6. luogu2540 斗地主增强版

    题目大意 给你一副手牌,没有飞机带翅膀,按斗地主的规则,求将所有牌打出的最少次数. 题解 先不考虑顺子 我们已经知道花色对牌没有影响,那么如果不考虑顺子,每个牌具体是什么数字我们也用不着知道,我们关心 ...

  7. <form> 标签的entype属性

    entype属性规定在发送到服务器之前应该如何对表单数据进行编码. 属性值 描述 application/x-www-form-urlencoded 在发送前编码所有字符(默认) multipart/ ...

  8. bzoj 1370 Gang团伙

    题目大意: 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,满足 1. 我朋友的朋友是我的朋友 2. 我敌人的敌人是我的朋友 所有是朋友的人组成一个团伙 告诉你关于这n个人的m条信息,即某两个 ...

  9. 通过绑定ip地址可以暂时解决抢占ip问题

    以前设置的路由器密码都忘记了 admin重复,在工作上遇到了 一个去除str左右两边的空格换行符回车等 trim

  10. C的结构体函数

    #include<stdio.h> #include<string.h> struct Test { int age; ]; double score; }std1; //结构 ...