Vue2 解决computed返回值未能渲染到DOM的问题

已于 2022-09-13 20:51:05 修改
阅读量2.2k 收藏 1
点赞数 1
分类专栏： Vue.js 文章标签： 前端 javascript vue.js
于 2022-09-13 20:41:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52697994/article/details/126839561
版权

文章目录

前言

Vue2 computed返回值未能成功渲染到DOM的解决方案.
computed返回值之前DOM已渲染完成导致的computed值未能成功渲染.

一、情况

报表页面的表格必须保持恒久有数据, 在打印状态下展示所有待打印数据, 在普通情况下展示当页数据, 这样我将一个computed函数绑定到el-table的data的v-for, 这样在打印判定为true时就返回所有数据, 反之仅展示当页数据, 这样表格是没什么问题的.
但是表格标题栏左侧用以展示时间、发起人、审批的小表格, 虽然使用相同的computed, 却不能成功拿到值.

主表格删减后基本是这样, 没什么问题, 主要注意一下v-for.

<tbody
  v-loading="tableLoading"
  v-for="(item, index) in tableDataList"
  :key="index"
>
  <tr class="report-table-body-row" v-if="item !== ''">
    <td class="text-align-center" rowspan="2" colspan="1"> <!-- 序号 -->
最低0.47元/天 解锁文章
白瑕
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
computed vue 不 触发_vue中使用computed计算数据不生效
weixin_39516956的博客
12-19 7353
在计算属性中依赖于props的data数据，当data更新后，computed并没有实时去拿data数据。(本来想通过watch data的改变去实现，但是watch一直不执行，但data数据本身确实改变了，很诡异...)代码如下：props: {data: {default: () => {},type: Object,},},data() {return {};},created() {...
vue数组中数据变化但是视图没有更新解决方案
weixin_30817749的博客
05-25 1908
场景 在我使用vuex的过程中，使用computed获取数据。获取到的数据格式是这个样子的 carts: [{}, {}, {}] 但是我在这个页面中需要给这个数据额外添加一个数据字段 carts[index].editState = false; 遇到的问题 当我这样开始做的时候，是直接在conputed计算属性中获取这个值，视图没有更新。 参考这篇文章：https://cn.vuejs.org...
vue中数组改变不渲染页面问题处理，解决办法使用splice
qq_41183828的博客
10-11 2781
语法结构：splice(index,len,[item]) 1、可以用来添加/删除/替换数组内某一个或者几个值 2、该方法会改变原始数组 index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空 1.修改 相当于先删除再添加 methods:{ clickModify:function () { this.arr.splice(0,1,item);
vue2+ant design vue 项目开发小坑(一)——computed属性不生效
cy1502的博客
03-18 3020
写在前面： 按照标题内容搜，只能搜到计算属性和watch监听的原理，因为他压根就是生效了！但是有点小瑕疵~ 核心代码是这样的： data ({ return { projectInfo: {}, form: this.$form.createForm(this, { onValuesChange: (props, values) =>{if (values ==this.testInfo) returnobject.assign(this.testInfo, value
Vue2-响应式系统之computed
qq_39173779的博客
03-11 3330
Vue2-响应式系统之computed
vue开发过程中，修改了数据，但是页面死活不渲染改变！没变化！怎么办？6种方法解决~
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-05 1万+
通常是某个渲染的数组改变了层级较深的数据导致页面没有实时渲染就这么写 this.items=JSON.parse(JSON.stringify(this.items));
vue 计算属性未重新计算 / computed 未触发 / computed 原理&源码分析
wrc的专栏
11-30 1万+
vue computed源码分析
vue面试题-vue常见面试题和答案
03-13
答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。 17. Vue组件中data为什么必须是一个函数？...
vue面试题.docx
09-04
当你修改了 data 的值然后马上获取这个 DOM 元素的值，是不能获取到更新后的值，需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 DOM 元素之后在获取，才能成功。 Vue 组件中 data 因为 JavaScript 的...
VUE常见面试题总结篇
02-16
答案：当你修改了 data 的值然后马上获取这个 dom 元素的值，是不能获取到更新后的值， 你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 dom 元素之后在获取，才能成功。 17. vue 组件中 data 为什么...
最基本的vue面试题，有答案
02-03
Vue.js 是一个流行的前端JavaScript框架，它以组件化开发、数据...这些面试题涵盖了Vue的基本概念，包括响应式系统、组件通信、生命周期和DOM操作等方面，理解和掌握这些知识点对于成为一名合格的Vue开发者至关重要。
已解决：Vue改变数据后界面不自动渲染，Vue中使用v-for遍历对象数组，当给其中某个元素对象重新赋值之后，页面组件列表没有渲染更新。
Spy003的博客
04-02 6809
问题如标题所说，Vue中使用v-for遍历对象数组，当给数组其中某个元素对象重新赋值之后，页面组件列表没有及时更新渲染，而是在页面进行了其他的渲染操作以后列表才更新出来新的数据。这样，当你使用 $set 或 Vue.set 方法来改变数组的某个索引位置的元素时，Vue 就能够检测到数组的变化，从而触发组件的重新渲染。其中，第一个参数是要修改的数组，第二个参数是要修改的索引位置，第三个参数是要设置的新的值。来改变数组的某个索引位置的元素。为了解决这个问题，你可以使用。
Vue 函数在methods中可以正常调用，但在computed中调用会报错
qq_43654065的博客
11-18 3960
methods和computed的效果实际上是一样的，但在开发中把methods中的方法写入到computed的中，会一直报错：函数未被定义。。 解决方法： methods调用函数需要带括号。 computed调用函数不需要带括号。 ps：如果在标签中需要调用methods或computed中的方法，同理。 ...
vue子组件更新数据 界面没有渲染
weixin_35757531的博客
01-03 1035
如果 vue 子组件数据发生更新，但界面没有渲染，可能是因为您没有正确地使用数据绑定。 在 vue 中，当组件的数据发生变化时，界面会自动更新。要在组件中绑定数据，您需要使用花括号把变量名括起来，例如： <template> <div>{{ message }}</div> </template> <script> export d...
Vue修改数据页面未被渲染
龘
04-20 2303
直接添加属性的问题 <template> <div> <p v-for="(val,key) in item" :key="key"> {{ val }} </p> <button @click="addProperty">动态添加新属性</button> </div> </template> <script> export default { data:{ retu
Vue中 数据改变但未渲染的问题，页面中并没有自动更新，但是在控制台可以打印出来，常见解决方法
liumimi973的博客
02-03 8542
打印出来值，赋值未渲染
vue中的计算属性
weixin_44628177的博客
05-16 334
计算属性: 1.定义:要用的属性不存在，要通过已有属性计算得来。 2.原理:底层借助了0bjcet.defineproperty方法提供的getter和setter. 3.get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。 5.备注: 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发
vue2数据嵌套过深，导致页面数据不刷新的问题
coding...
11-28 4194
vue2数据嵌套过深，导致页面数据不刷新的问题
【记录bug】element-ui+vue2 table表格页面数据不渲染问题
qq_44938769的博客
02-23 1883
使用element uivue实现el-table数据渲染至页面，一共有几种数据的渲染方式，分别使用了v-if来进行判断。
vue2写computed
最新发布
10-19
在Vue2中，computed是一种计算属性，它可以根据已有的数据计算出新的数据。computed属性是基于它的依赖缓存的，也就是说，只有当computed属性依赖的数据发生变化时，computed属性才会重新计算。computed属性可以像普通属性一样在模板中使用，也可以在Vue实例中通过this访问。在Vue2中，computed属性的定义需要在computed选项中进行，具体的语法格式如下： ``` computed: { computedPropertyName: function() { // 计算并返回新的值 } } ``` 其中，computedPropertyName是计算属性的名称，function()是计算属性的计算函数，它会返回新的值。在计算函数中，可以使用this来访问Vue实例中的数据，也可以使用其他的计算属性。computed属性还可以使用get和set函数来实现双向绑定，具体的语法格式如下： ``` computed: { computedPropertyName: { get: function() { // 计算并返回新的值 }, set: function(newValue) { // 处理新的值 } } } ``` 在这种情况下，computedPropertyName是计算属性的名称，get函数用于计算并返回新的值，set函数用于处理新的值。当计算属性的值发生变化时，set函数会被调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值