vue 数据更新问题
在uni-app构建选项卡时,方法中改变的数组数据 无法更新v-if中的布尔值
在函数中打印出来是修改成功了,但在页面中并没有进行响应
布局如下:
<swiper :current="tabCur" class="swiper-box" duration="700" circular @change="changeDrawList">
<swiper-item class="tab-content" v-for="(items,indexs) in drawList" :key="indexs">
<scroll-view style="height: 100%; overflow: hidden;" scroll-y @scrolltolower="onBotton">
<!-- 加载loading图标 -->
<view class="content" :style="{height:height1 + 'px'}" v-if="items.loadModal">
<view class="cu-load">
<view class="gray-text">
<view class="loading">
<text></text>
<text></text>
<text></text>
<text></text>
<text></text>
</view>
</view>
</view>
</view>
<block v-else>
<view class="ma-desc">
<text class="te-desc">  {{items.message}}</text>
<text class="te-author">{{items.createTime}}</text>
</view>
<!-- 作品区域 -->
<view class="draw-list">
<view class="drawItem" v-for="item in items.data" :key="item.draw_id">
<view class="draw">
<!-- 短边优先 -->
<image :src="item.draw_image_url" mode="aspectFill" lazy-load></image>
</view>
<view class="drawAuthor">
<image :src="item.draw_tou"></image>
<text class="name">{{item.draw_name}}</text>
</view>
</view>
</view>
</block>
</scroll-view>
</swiper-item>
</swiper>
vue中的操作:
getInfo() {
this.drawList[this.tabCur] = List;
// 应完成请求后的回调中设置
setTimeout(() => {
// this.drawList[this.tabCur].loadModal = false;
this.$set(this.drawList[this.tabCur],"loadModal",false); //这个也搞不定,只成功修改了数组中的对象值
this.$forceUpdate(); //救星 强制刷新
}, 1500);
}
vue 数据更新问题的更多相关文章
- Vue数据更新页面没有更新问题总结
Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以p ...
- vue数据更新UI不刷新显示解决方案
vue比较常见的坑就是数据(后台返回)更新了,但是UI界面并没有更新,常见于以下情况: 一.数据为数组时1.通过数组索引修改数组元素例如: 此时UI数据并不会刷新 2.修改数组长度时: 解决方案: 如 ...
- VUE数据更新视图不更新的原因
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 数组更新只能通过 ...
- vue 数据更新了但视图没改变?试试 $set
场景 编辑表格中某行数据时,需要把它赋值给对话框表单 this.form,如果直接用 = 赋值,会导致:表单的输入框内容无法二次编辑. 使用 Vue-dev-tool 的 Components 功能测 ...
- VUE 数据更新 视图没有更新
3.还有个小技巧 当数据已经更新了 但是视图没有更新的时候 比如 这里 视图并没有更新 说明aa这个方法中没有触发视图更新 只要这里面随便一个对象能触发更新 则所有的视图更新都会生效 在data中 ...
- 【转】vue项目重构技术要点和总结
vue数据更新, 视图未更新 这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新.这个不算是项目重构的技术要点,也和大家分享一下vue2.0通常的解决方案吧! 解决 ...
- 解决Vue循环中子组件不实时更新的问题
问题描述 使用Element-UI中的table组件时会遇到一个常见的问题.当在el-table中调用子组件的时候会出现数据更新后,子组件没有重新渲染的问题. eg:资源列表中的健康度组件. 代码如下 ...
- vue、React Nactive的区别(转载)
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
- Vue.js与React的全面对比
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
随机推荐
- centos7没有ifconfig命令解决办法
输入ifconfig 提示不存在 首先确认下是否是环境变量没有ifconfig 引起. ls /sbin/ifconfig 以上确定了系统是没有安装ifconfig,下面我们来安装 yum i ...
- 超实用!手把手教你如何用MSF进行后渗透测试!
在对目标进行渗透测试的时候,通常情况下,我们首先获得的是一台web服务器的webshell或者反弹shell,如果权限比较低,则需要进行权限提升:后续需要对系统进行全面的分析,搞清楚系统的用途:如果目 ...
- 前端知识点回顾之重点篇——CSS中flex布局
flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...
- nodejs命令行执行时带参数
nodejs命令行执行时带参数 转 https://www.jianshu.com/p/474e6d76f867 今天项目里突然想在初始化时跑一些数据,于是想起以前在python时可以在命令行里带 ...
- 修改Linux系统时间EDT改为CST
今天发现一台服务器时间比北京时间慢 12 个小时,使用 date 命令后发现是: 2019年 06月 04日 星期二 21:50:33 EDT EDT 时间即美国东部时间.这里要改为北京时间即可: m ...
- idea 出现 bootstrap.properties 中的内容不能识别
错误截图如下 依赖库引用问题 第一种: <dependency> <groupId>org.springframework.cloud</groupId> < ...
- SDN实验---OVS了解(转载)
转载自:https://opengers.github.io/openstack/openstack-base-use-openvswitch/ 一:Open vSwitch介绍 (一)介绍 在过去, ...
- Qt编写安防视频监控系统18-云台控制
一.前言 云台控制是视频监控系统中必备的一个功能,对球机进行上下左右的移动,还有焦距的控制,其实核心就是控制XYZ三个坐标轴,为了开发这个模块,特意研究了各种云台控制的方法和开源库比如soap,有些厂 ...
- jzy3D从入门到弃坑_2使用jzy3D0.9画2D散点图
jzy3D从入门到弃坑_2 使用jzy3D0.9画2D散点图 觉得有用的话,欢迎一起讨论相互学习~Follow Me 在上一节中安装jzy3D 0.9版本并且运行了3D的例子 https://blog ...
- es查询示例
1. 建立连接 from elasticsearch import Elasticsearch es = Elasticsearch(["localhost:9200"]) 2. ...