关于vue中数组赋值无法渲染在页面的问题

最新推荐文章于 2021-10-11 10:23:49 发布
最新推荐文章于 2021-10-11 10:23:49 发布
阅读量7.6k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： js 与框架类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/oXiangZuoZuo12345/article/details/81676692
本文探讨了在使用Vue进行网页重构时遇到的数据渲染与this指向问题，通过实例分析，阐述了如何通过将success函数改为箭头函数及正确处理数组赋值方式来解决这些问题，确保Vue组件正确展示数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在做一个网页重构成VUE的时候，有段代码是这样的

一直能打印出pics的值，但是就是无法渲染出来，检查了不是视图那边是错，最后发现其中有两处错误，一处是this指向问题，此地打印出来的this.pics并不是data里面的pics的值，后面把success函数改成箭头函数即可，还有vue中数组赋值数组不能直接赋值。可以用push方法，下面是修改后的代码

 

mpvue踩坑之setter触发相关&Vue中数组和对象更改后视图不刷新的问题
AKIM一枚
10-28 1412
vue以及mpvue中数组或对象中的数据发生改变后视图层没刷新的问题 发现这个问题是因为自己在写学委小程序/高校班级助手的时候，使用的是mpvue框架，使用vue的语法来写小程序的，当遇到了上传图片或者上传文件的时候，由于$data中的数据结构形式使用的跟以往的不太一样，代码片段如下： data() { return { bgIsTransparent: false, dateTimeA...
vue 解决数组赋值无法渲染在页面的问题
10-16
今天小编就为大家分享一篇vue 解决数组赋值无法渲染在页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue数组更新前台不渲染问题两种方式
qq_39419395的博客
11-10 844
目标解决VUe数组刷新前台不渲染方式： 方式1： 使用如下的方式，调用全局的set方法，使其vue相应； this.$set(this.conditionFieldList[index],"source","none") 方式2： 给定table增加 :key="conditionsKey" 属性；每次调用方法时，使用 conditionsKey++ 强制渲染。 例如: 如下 conditionsKey 使用 <a-table bordered :r...
【VUE】关于修改数组后，页面不渲染的问题
NAMECZ的博客
11-12 1万+
首先要解决这个问题，我们要清楚产生这个问题的原因。 vue之所以能够监听Model的变化，是因为Javascript语言本身提供了Proxy或者Object.observe()的机制来监听对象状态的变化。 但是，对于数组元素的赋值却没有办法直接进行监听，因此会产生以下情况： 比如我们vue的data里创建一个json数组： list:[ {"name":"苹果"}, ...
Vue中关于修改数组或者对象后，页面不渲染的问题
weixin_44189739的博客
04-18 2724
在Vue中，如果修改数组中的某个值，或者是对象的某个值是不会立即更新到dom对象中的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> ...
VUE：JS中进行数组对象赋值，页面不能实时回显
干饭搬砖两不误。
04-09 4871
简介 VUE项目中，有时候进行数组对象赋值时，不能实时回显到页面中，但是打印又有新的数据在里面。 具体实现 场景一：对象赋值新的属性时，页面不能回显。 原因：该对象本身是没有这个属性的。 解决方案： this.$set(obj, 属性名, 属性值)； 案例如： this.$set(obj, "name", "张三"); 场景二：数组赋值新的属性时，页面不能回显。 原因：VUE中由于 J...
vue踩坑记录之数组定义和赋值问题
10-17
问题在于，当尝试用下标（如`this.effective_date[0]`和`this.effective_date[1]`）给数组赋值时，如果数组未定义长度或预先填充，Vue可能无法正确检测到变化，从而导致视图不更新。这是因为在JavaScript中，直接...
解决vue数组中对象属性变化页面不渲染问题
10-18
在Vue.js中，当我们对数组进行更新操作时，Vue提供了一组变异方法来帮助我们触发视图的更新。这些变异方法包括push(), pop(), shift(), unshift(), splice(), sort()和reverse()。它们会对原数组进行修改，因此能够...
vue中更改数组中属性,在页面中不生效的解决方法
10-16
通过以上方法和注意事项的阐述，我们能更好地理解和解决在Vue中更改数组中属性时页面不更新的问题。实际上，Vue提供了一整套响应式系统来帮助开发者管理数据与视图的关系，而正确使用这些响应式方法将直接关系到应用...
vue 修改对象属性 没有渲染页面_解决Vue数组中对象属性变化页面不渲染问题_百厌_前端开发者...
weixin_30739265的博客
12-24 682
做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。换了关键词搜索找到了相关方法。其实之前读文档教程的时候看到过这里，但是只有真的使用之后才会有最直接的感触。数组更新检测变异方法push()pop()shift()unshift()splice()sort()reverse()你打开控制台，然后用前面例子的 items 数组调...
vue中数组改变不渲染页面问题处理，解决办法使用splice
qq_41183828的博客
10-11 2940
语法结构：splice(index,len,[item]) 1、可以用来添加/删除/替换数组内某一个或者几个值 2、该方法会改变原始数组 index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空 1.修改 相当于先删除再添加 methods:{ clickModify:function () { this.arr.splice(0,1,item);
解决Vue数组更新不渲染的问题
java新手的博客
01-06 1万+
当使用索引直接赋值和直接修改数组长度时，Vue不能检测出变动的数组。 这样写页面显示的是共0个 &lt;span class="pull-right"&gt;已全部加载，共{{fileDatas.length}} 个&lt;/span&gt; js: export default { data() { return { fileDatas: [] ...
解决Vue数据更新数据不渲染问题
云海
08-30 2万+
Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测：  push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue) filter(), concat(), slice() ...
【MpVue】v-for列表渲染踩坑记录-vscode
栗山的博客
09-18 1791
软件：VsCode ①Elements in iteration expect to have ‘v-bind:key’ directives. <div v-for='item in todos'> {{ item.text }} </div> 这个为什么会报错呢，网上搜集了一些资料才知道 VUE2.2+版本里面，当在组件中使用v-for时，key是必须的 来源：点这...
Vue渲染失败的几种原因和解决方法
rain_tsubasa的博客
06-14 9534
在进行数据双向绑定中，常遇到当数据变了，页面却没有同步渲染的情况。 首先Vue 的数据双向绑定原理 是分为 1.observe 2.deps 3.watcher 在observe中，会通过Object.keys()获取所有的属性push一个订阅器到 deps中， 1.假设template中，我在created的钩子函数中定义了this.a = 1,在btn中添加了事件改变this.a,此时观察到页面未渲染。 <template> <div>{{a}} .
vue 修改数组数据 界面不渲染视图的解决方法汇总
guoqing的博客
01-06 2550
使用vue进行开发时，我们经常会遇到对已经渲染在界面上的数组进行修改参数时，参数修改之后并不会更新界面的信息，但是实际上数组的参数是已经修改到了，只是vue没有进行视图的更新渲染，下面列举了多种的解决方法...
vue在低安卓版本的一些兼容性问题
DACBE的博客
04-27 4436
刚开发公司项目要求在安卓5.0的系统进行适配，在这整理一下一些基本的兼容性问题。 1、首先是对ES6的一些新特性，低版本的安卓可能会不支持，这里需要引入两个包来进行转化，babel-polyfill和es6-promise 首先npm安装 cnpm install babel-polyfill cnpminstall es6-promise 然后再main.js里引入 import ...
vue修改对象的属性值后页面不重新渲染
热门推荐
lx_1024的博客
12-15 6万+
最近项目在使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下： HTML页面如下： {{ item.name}} 编辑 js部分如下：
vue 数组渲染时 改变数组 页面不渲染
xinbear的博客
07-20 3472
比如要对调数组内两个值顺序 advance(index) { if (index == 0) { return } let c = JSON.stringify(this.list[index - 1]) this.$set(this.list, index - 1, JSON.parse(JSON.stringify(this....
vue数组直接赋值页面不渲染
07-16
当我们直接给数组赋值时，Vue无法检测到这种变化，并且不会更新页面。 在Vue中，如果我们想要让页面渲染数组的变化，我们需要使用Vue提供的特殊方法来更新数组，例如使用`push`方法向数组末尾添加元素或使用`splice...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值