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从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
随机推荐
- 【深入学习linux】Linux系统安装
1. 配置内存大小,和设置镜像文件,开启虚拟机,点击虚拟机,立即按F2,会出现下图 2. 选择 Boot 菜单,默认是以硬盘进行启动,但是硬盘目前为空,则不能启动,需要改成以光盘形式启动即 CD-RO ...
- js判断字符串是否以指定字符串开头或是否包含指定字符串
1. 用js判断一个字符串是否是以某个子字符串开头如:ssss001是否以ssss开头, 可以这样做: 1 2 3 4 5 6 var fdStart = strCode.indexOf(" ...
- 认真分析mmap:是什么 为什么 怎么用(转)
阅读目录 mmap基础概念 mmap内存映射原理 mmap和常规文件操作的区别 mmap优点总结 mmap相关函数 mmap使用细节 回到顶部 mmap基础概念 mmap是一种内存映射文件的方法,即将 ...
- File checksum
File checksum https://golang.org/pkg/io/#Copy https://blog.iphpo.com/blog/2017/03/golang-產生檔案的md5-ha ...
- git push ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'https://github.com/Operater9/guest' hint: Updates were rejected because the tip of your current bra
推送本地代码到github报错 git push报错 ! [rejected] master -> master (non-fast-forward) error: failed to push ...
- Java学习-059-Jsoup爬虫获取中国所有的三级行政区划数据(四),生成相应的 JSON 数据并输出
还是直接上马,对应的源码如下所示: 生成的三级行政区划部分 JSON 数据如下所示:
- how to transfer your linux to new work environment
tar cvpzf backup.tgz --exclude=/proc --exclude=/lost+found --exclude=/backup.tgz --exclude=/mnt --ex ...
- Dubbo的设计结构和工作原理
(1)设计结构 Provider:暴露服务方称之为“服务提供者”. Consumer:调用远程服务方称之为“服务消费者”. Registry:服务注册与发现中心的目录服务称之为“服务注册中心”. Mo ...
- unity 如何打开本地文件夹,并选中文件
public static void OpenDirectory(string path, bool isFile = false) { if (string.IsNullOrEmpty(path)) ...
- vue-cli3用图形化的方式创建项目
Vue脚手架可以快速生成Vue项目基础的架构. A.安装3.x版本的Vue脚手架: npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目: 1).使用命令创建Vue ...