uniapp v-for数据改变后，页面没渲染的问题

已于 2022-07-09 10:18:05 修改
阅读量3.8k 收藏 4
点赞数 1
文章标签： 前端 uniapp v-for
于 2022-06-09 20:50:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LJJONESEED/article/details/125210767
版权 
<view class="" v-for="(item,index) in cnameList" :key="index">
<view class="labelInput">
		{{item.name}}：
		<input class="uni-input" :value="item.cValue" @click="showTree(item.id)" />
	</view>
</view>

我需要改变item.cValue的值，点击事件后，渲染不到页面。
原来是 要

//注意这里的v-if="updata"  来进行判断
<view v-if="updata" class="" v-for="(item,index) in cnameList" :key="index">
	<view class="labelInput">
		{{item.name}}：
		<input class="uni-input" :value="item.cValue" @click="showTree(item.id)" />
	</view>
</view>

然后就是点击事件的时候，先不显示，改变了数据之后再显示就可以渲染到页面了。

不完美女孩-
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app （vue ) 数据变化，页面不重新渲染的问题
糯米鸡的博客
08-03 4046
前几天遇到一个问题 当我点击取消收藏按钮的时候，再重新刷新页面，会发现第2个项目里的爱心按钮还是空心的 按理说，收藏页面的所有线路，按钮都是已经收藏的状态，应该是实心爱心图标，可是只要我之前点过取消，让按钮变成空心状态，它就会一直是空心状态。 很明显，子组件的数据变化了，但是反应在页面上，没有重新渲染。 最后找到原因 <template> <view> <busLine v-for="(item,index) in lines" :line="ite.
解决vue的 v-for 循环中图片加载路径问题
10-18
在Vue.js应用中，`v-for`循环常用于渲染列表数据。然而，在处理图片加载时，尤其是在图片路径与数据动态绑定的情况下，可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，...
uniapp 数据更新却没有渲染页面怎么办
qq_41605928的博客
01-12 653
uniapp强制刷新子组件。
解决uniapp中数据请求到但是未渲染
zyl19950717的博客
07-06 4080
解决常见的uniapp中请求数据无法渲染的问题
uniApp @input事件更改输入框值，值改变了但是页面没更新新的值
最新发布
Angel_girl319的博客
06-17 618
我想在页面输入值的时候同步更新页面上的数据，但是页面数据没更新,上述方法在pc端可以，但是在移动端上就不行，为啥用v-model不行，但是用:modelValue可以呢，请参考下面文章。
uni-app 使用uni.$emit()和uni.$on()传值后 页面数据不渲染的问题
学习路上的小刘
12-27 1561
uni-app 使用uni.$emit()和uni.$on()传值后 页面数据不渲染的问题
vue或者uniapp修改数据后页面不重新渲染
weixin_47586598的博客
02-28 1514
【代码】vue或者uniapp修改数据后页面不重新渲染。
uniapp请求到数据却渲染不到页面
m0_71202576的博客
10-21 1591
uniapp请求到数据却渲染不到页面
解决uniapp项目开发从某一页面返回到tabbar页面时，页面不刷新，无法重新获取跟新后的数据，无法重新渲染页面问题。
m0_55315930的博客
05-12 8811
解决uniapp项目开发从某一页面返回到tabbar页面时，页面不刷新，无法重新获取跟新后的数据，无法重新渲染页面问题。
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
10-16
主要介绍了vue.js基于v-for实现批量渲染 Json数组对象列表数据,结合实例形式分析了vue.js使用v-for遍历json格式数据渲染列表相关操作技巧,需要的朋友可以参考下
Vue中v-for的数据分组实例
11-28
3. 嵌套使用`v-for`指令在视图中渲染分组后的数据。 4. 可以根据需要为每个分组或元素添加特殊属性，如ID，以便进行进一步的交互或操作。 理解并熟练运用这些技巧，可以帮助开发者更高效地处理和展示Vue应用中的...
详解vuejs之v-for列表渲染
10-19
在Vue.js中，`v-for`指令是用于列表渲染的关键特性，它允许我们将数组或对象的数据动态地渲染到HTML元素中。在本文中，我们将深入探讨`v-for`的用法，并通过实例来展示其工作原理。 首先，我们要了解Vue.js的核心...
微信小程序遇到修改数据后页面不渲染的问题解决
08-31
「微信小程序遇到修改数据后页面不渲染的问题解决」 微信小程序是近年来非常hot的移动应用程序开发平台，越来越多的开发者选择使用微信小程序来开发自己的应用程序。但是，在开发过程中，开发者经常会遇到一些问题...
【uniapp】数组赋值检测变化，页面不渲染问题
weixin_38792911的博客
08-24 4727
问题描述： 对于数组来说，当我们正常赋值的时候会出现一种情况，就是明明控制台输出时显示数组数值已经变化，但是页面并没有进行渲染变化。这是因为数组不能检测到变化。 //以下两种都是数组没办法检测到变化的赋值方式 var arr=[a,b]; arr[0]=c; console.log(arr); //控制台输出[c,b],但是页面并不会渲染 arr.length=3; //同理页面依然不能响应 正确的赋值方式 //方法一 this.$set(this.arr,index,newValue); //arr=
uni 修改数据页面不重新渲染
沉睡的博客
09-23 684
uni 修改数据页面不重新渲染 由于数据层次太多，没有触发render函数进行自动更新，需手动调用，调用方式如下: this.$forceUpdate();
vue或者uniapp修改数据后页面不重新渲染_uni 修改数据不生效
m0_63174618的博客
04-12 395
【代码】vue或者uniapp修改数据后页面不重新渲染_uni 修改数据不生效。
Web 3D的部分技术选型和Babylon
2401_84411767的博客
04-27 265
/ 引入 Babylon.js 库。// 例如，设置网格材质。// 加载 glTF 模型。// 加载 glTF 模型。// 例如，设置网格可见性。// 获取加载的网格。// 设置网格位置和旋转。// 获取加载的网格。// 设置网格位置和旋转。// 添加网格到场景中。// 适配窗口大小变化。// 添加网格到场景中。// 适配窗口大小变化。
uni-app 点击按钮数据已发生改变了，但是没有渲染渲染视图
weixin_47024018的博客
04-09 3638
数据发生改变，视图没有更新 问题描述：当用户点击一个按钮button ，已经更改了状态，并且已经重新请求接口，但是视图并没有直接更改，需要用户手动刷新一遍才可以看见状态更改; 代码: 这样并不能直接实现到用户点击后按钮的状态发生改变 methods:{ // 获取数据 getData() { // 获取数据的Axios请求 .... }， apply(item) { ..... Axiso.get(url,data,(res) =>{ uni.showToast({
uniapp 中使用v-for 偶发列表不渲染（key值动态变化）
qq_55856928的博客
04-06 503
解决办法是把v-for key值全部取循环的索引。可解决办法是用this.$set来设置变化的数组。
uniapp v-for
09-02
uniapp 中的 v-for 是用来循环渲染数据的指令。它可以用于在模板中循环渲染数组或对象的属性。 在使用 v-for 时，你需要提供一个数据源和一个模板，然后将数据源绑定到模板中。例如： ``` <template> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </template> <script> export default { data() { return { list: ['Apple', 'Banana', 'Orange'] } } } </script> ``` 在上面的代码中，我们使用 v-for 循环渲染了一个数组 `list`，并将数组的每个元素渲染为一个 `<li>` 标签。`:key="index"` 是为了提高性能，它用来标识每个循环项的唯一性。 除了数组，你也可以使用 v-for 循环渲染对象的属性。例如： ``` <template> <ul> <li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li> </ul> </template> <script> export default { data() { return { obj: { name: 'John', age: 25, gender: 'Male' } } } } </script> ``` 在上面的代码中，我们使用 v-for 循环渲染了一个对象 `obj` 的属性，并将属性名和属性值渲染为一个 `<li>` 标签。 希望能帮到你！如果还有其他问题，请继续提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值