Vue框架下如何解决父组件修改数组传给子组件无法渲染问题

最新推荐文章于 2024-01-17 17:06:42 发布
最新推荐文章于 2024-01-17 17:06:42 发布
阅读量1.7k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AJ_AJ/article/details/103733039
版权

Vue框架下如何解决父组件修改数组传给子组件无法渲染问题
在公司遇到个需求，随着element tabs标签切换，form表单label值需要改变，
我想着这不是很简单吗，随手开发出form表单，一个tabs子组件，好戏来了，
我在父组件进行数据传递，当切换，我把数据进行修改传过去，问题来了，界面不渲染，一个个排查，打印一下控制台，嗯，数据变化了，怎么界面不渲染呢，我试着用this. f o r c e u p d a t e 强 制 渲 染 ， 然 而 还 是 没 软 用 ， 再 来 ， 我 在 子 组 件 进 行 监 听 ， 没 用 ， 深 度 监 听 ， 没 用 ， 不 带 变 化 的 ， 后 面 想 着 是 不 是 插 入 数 据 有 问 题 ， 思 路 来 了 解 决 办 法 也 就 有 了 ， 贴 代 码 ！ 原 来 的 t h i s . f o r m I t e m s [ 4 ] = 里 面 是 我 修 改 的 j s o n 对 象 后 面 我 这 样 赋 值 t h i s . forceupdate强制渲染，然而还是没软用，再来，我在子组件进行监听，没用，深度监听，没用，不带变化的，后面想着是不是插入数据有问题，思路来了解决办法也就有了，贴代码！ 原来的 this.formItems[4] = {里面是我修改的json对象} 后面我这样赋值 this. forceupdate强制渲染，然而还是没软用，再来，我在子组件进行监听，没用，深度监听，没用，不带变化的，后面想着是不是插入数据有问题，思路来了解决办法也就有了，贴代码！原来的this.formItems[4]=里面是我修改的json对象后面我这样赋值this.set(this.formItems, 4, { 里面是我修改的json对象 })
这样监听到了，界面也渲染了，大致问题了解了一下，还是由于 JavaScript 的限制，Vue 不能检测数组对象属性的添加或删除，至于是不是js的限制，还是vue其中的问题我就没去深究啦

silver lining
关注
【Vue3 第十四章】父组件和子组件数据通信、子组件暴露树形给父组件
前端知识分享喵
01-28 1739
父子通信是Vue项目开发过程中最常见使用最频繁的通信方式，可以解决大部分开发中的数据通信问题，简单易操作。此文章主要介绍父组件传递数据给子组件，以及子组件传递数据给父组件、子组件暴露树形给父组件三个部分的内容。
vue3.0 + ts 子组件获取父组件数组类型的参数，访问length报错Property ‘length‘ does not exist on type ‘unknown‘
Leslie_hxd的博客
11-23 3075
vue3.0 + ts 子组件获取父组件数组类型的参数，访问length报错Property 'length' does not exist on type 'unknown' 场景：父组件传一个数组类型数据到子组件，子组件拿到数组需要遍历或者取长度等操作，typescript类型检查报错说length不在unknown上
vue（数据改变，DOM不渲染问题）
Dong8508的博客
08-12 7914
  1、组件内部，属性值地址空间内引用地址改变，DOM不能渲染。      问题举例：this.items = [[],[],[],[]]   1、在items 中，修改任意一项数组中的值，DOM是不会更新的， 2、解决方案： this.items = [...this.items]。通过解构赋值，重新给items赋值。 2、组件之间传值，父组件传data改变,子组件未更新。 ...
解决：vue3中赋值数组渲染不了
qq_46333384的博客
03-13 3800
改变vue2的习惯，vue2向vue3过渡，解决赋值数组有值但渲染不了
vue父传子组件数据不渲染且报错
wingxabc的博客
11-12 1696
在vue开发过程中会遇到这样的一个问题，自己定义了一个组件，然后又定义了个子组件，父组件的数据需要将请求回来的数据传递给子组件，但是引入子组件在页面加载时就报错了，接口数据请求回来了也不渲染，这是因为接口请求和子组件渲染是同步的，子组件没有接收数据，父组件的接口数据请求回来时子组件已经创建好了虚拟dom，所以子组件报错，同时子组件里的prop不想响应的，所以不会再次更新dom，接口请求回来的数据也不会更新。 解决方法1：在子组件条件v-if，在接口请求回来后在渲染。 解决方式2：使用watch或者com
Vue2.0问题总结—在父组件中无法渲染子组件的问题
Neokekeke的博客
01-25 6916
最近刚入门Vue2.0，准备跟着文档写demo，由于自己的粗心导致出现的一些问题，在这里总结下。先贴下我的VSCode中Vue快速添加的通用代码模板： "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", "<template>", " <div></div>",
vue父组件传值给子组件在element-UI select，input不渲染问题
blank_g的博客
06-29 1739
// 渲染改变值的地方 <el-form-item label="审批结论：" prop="reason"> <el-select v-model="approvalForm.reason" placeholder="请选择" @change="changeReason"> <el-option label="通过" value="0"></el-option> <el-option label="不通过" value="1"&
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
通过`props`，父组件能够将数据下传给子组件，使子组件根据接收到的数据进行渲染和操作。而子组件则通过`$emit`触发事件并携带数据，通知父组件执行相应的方法，实现了数据的上行。这种机制使得组件之间的解耦，提高...
Vue实现的父组件向子组件传值功能示例
10-17
通过这些数据源，父组件可以传递不同形式的数据给子组件，子组件根据传入props的类型接收并渲染。 Vue的另一重要概念是事件系统。子组件可以通过$emit方法触发一个自定义事件，并将数据作为参数传递给父组件。父...
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
12-29
数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果： 树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 ...
vue中父组件异步传值，渲染问题
最新发布
qq_41838435的博客
01-17 933
父组件异步传值
VUE 父组件给子组件传值 ，子组件有时渲染成功，有时渲染失败
weixin_42580967的博客
03-21 2551
Error in callback for immediate watcher "evaluateForm": "TypeError: Cannot read properties of undefined (reading 'ievaluateAblity')" 父组件传值给子组件，子组件渲染失败
在vue父组件中调用方法并传值给子组件碰到的渲染问题
八块腹肌的博客
05-28 978
今天碰到这样一个问题，爷组件传值给父组件，父组件在传值给子组件，但是子组件并没有渲染出来，仔细排查后发现是父子组件生命周期的问题，下边贴上代码： // 爷爷组件 <father :value="value" /> export default { data() { return { value:null } }, created() { console.log("grandpa created") } mounted() { console.log("gran
vue3遇到渲染bug问题
m0_51014049的博客
07-16 450
vue3遇到渲染bug问题
Vue—修改数据不渲染Dom问题
好的文章我尽力写，大家的学习我尽力帮
02-17 2921
一、添加属性的问题 <template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div> </template> <script> export default { data:()
vue 组件第一次不渲染问题_解决Vue循环中子组件不实时更新的问题
weixin_39725844的博客
12-19 1396
问题描述使用Element-UI中的table组件时会遇到一个常见的问题。当在el-table中调用子组件的时候会出现数据更新后，子组件没有重新渲染的问题。eg:资源列表中的健康度组件。代码如下： {{scope.row.name}}理论上当我更新数据的时候，sourceData的值已经发生了改变(而不是其中的某个字段发生了改变)，子组件应该获取的数据更新并重新渲染。实际上该页面的健康度组件只会保...
【vue3+elementplus】el-table的操作列使用子组件渲染按钮，按钮权限改变，父给子传值，子组件的dom不更新的解决方案
bbt953的博客
07-10 913
el-table的操作列使用子组件渲染按钮，按钮权限改变，父给子传值，子组件的dom不更新的解决方案
vue3父组件异步获取后端数据，子组件无法及时渲染问题分析、解决及使用suspense组件进行骨架屏优化
reason125132的博客
05-04 9884
vue3中一个常见场景，父组件向后端异步获取数据，再父子传参给子组件，由子组件来渲染获取到的数据。
vue 父组件向子组件传值，但子组件未更新
懒洋洋
04-17 2516
问题： 今天碰到一个vue的问题，父组件向子组件传值，在子组件可以打印出接收到的值，但是，子组件没有显示： 两个可能： 1，组件未渲染； 2， 组件渲染了。只是数据是空值，新数据传过来，没有重新渲染； 第一种情况可以很容易的排除， 那就是第二种情况，数据传过来是空的，所以渲染出来也是空的； 知道原因，就可以解决问题了。 解决： 在向子组件传值时，可以加一个判断，当数据不为空时传过去； <...
Vue框架下goods组件开发全面解析与Flex布局实战
本文档深入探讨了Vue框架中goods组件的开发，尤其关注了Flex布局和图标组件的实现。首先，我们来了解Flex布局，它在Vue中扮演着关键角色，用于创建响应式的、灵活的网页布局。通过设置`display: flex;`，开发者可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值