vue异步请求数据重新渲染方式

目录
  • vue异步请求数据重新渲染
    • 下面介绍一种方法解决
  • 自定义组件异步获取数据重新渲染
    • 视图层
    • 逻辑层

vue异步请求数据重新渲染

vue异步请求数据时往往不能及时更新，

下面介绍一种方法解决

export default {
        name: "pic",
        created() {
           this.getList();
        },
        data(){
            return{num:[]}
        },
        methods:{
            getList(){
                fetch('https://localhost：3000/get-banner-list').then(data=>{
                    return data.json()
                }).then((data)=>{this.num=data.data;console.log(this.num)})
            }
        }
    }

这个时候template标签里面的数据还没有更新，所以可以这样

<div class="propagate" v-show="num.length>0">
        <ul>
           <li  v-for="(item,index) in num" :key="index">
              <img :src="item.photo_url" :key="index">
           </li>
        </ul>
    </div>

等数据加载完再显示

自定义组件异步获取数据重新渲染

视图层

<myCard v-if="countView" icon="icon-yonghuzu" bgcolor="#2d8cf0" :count="homeData.govtCount" title="标题名称"></myCard>

逻辑层

data(){
    return {
            countView:true
        }
    }
//重新渲染组件
        _this.countView=false
        _this.$nextTick(()=>{
            _this.countView=true
        })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 解决异步数据更新问题

    问题 记录一下出现的问题, 数据翻倍 这是复现问题的代码 data() { return { space: "", allresult: [] }; }, methods: { getmessage() { this.allresult = []; axios .get( "https://gist.githubusercontent.com/xiaolannuoyi/9b0defe4959e71fa97e6096cc4f82ba4/raw/4be939123d488cee7

  • 解决vuex数据异步造成初始化的时候没值报错问题

    当使用vue做登录的时候,我们会把拿到的部分用户信息存在vuex+cookie中,我们知道,vuex的数据是会随着浏览器刷新而丢失的,此时我们会重新请求接口对vuex的数据进行再次赋值,如下 当有cookie但是vuex没有数据的时候再次请求赋值 state mutation vuex的数据是异步的,当我们页面需要直接拿vuex的值进行渲染的时候,初始化瞬间(即请求过程进行的时候),vuex是没有这个值的,如何解决这个问题,暂时总结了三种方法,希望有遇到的大佬进行补充和查错: 1.通过watch

  • vue中异步数据获取方式(确保数据被获取)

    vue中异步数据获取方式(确保数据被获取)

    目录 vue中异步数据获取 1.获取异步数据,通过async/await限制 2.将一个方法的返回值 vue处理数据(同步,异步)问题简单记录 情况介绍 最终解决方法:new Promise() vue中异步数据获取 1.获取异步数据,通过async/await限制 import { fetchList } from '@/api/article' //在created中即开始获取 created() {     this.getList() } methods:{     async getL

  • 浅谈vue异步数据影响页面渲染

    今天遇到一个问题,要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中,而在页面渲染时session中还没有user,页面直接报错. 因此我希望能在所有请求都得到后再去做页面的渲染. 1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏,避免渲染 2.写计数器,每1ms进行一次查询,如果session中已经有user,删除过滤器,移除滤布,appShow为true,开始渲染页面,这样可以保证页面的正常渲染

  • Vue3异步数据加载组件suspense的使用方法

    目录 前言 创建组件 总结 前言 Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档. 通常组件在正确呈现之前需要执行某种异步请求是很常见的,通常是通过设计一种机制开发人员按照机制处理这个问题,有很多很好的方法实现这个需求. 例如,从一个 API 异步获取数据,并希望在获取响应数据解析完时显示一些信息,如 loading 效果,在Vue3中可以使用 suspense 组件来执行这

  • vue异步请求数据重新渲染方式

    目录 vue异步请求数据重新渲染 下面介绍一种方法解决 自定义组件异步获取数据重新渲染 视图层 逻辑层 vue异步请求数据重新渲染 vue异步请求数据时往往不能及时更新, 下面介绍一种方法解决 export default {         name: "pic",         created() {            this.getList();         },         data(){             return{num:[]}         }

  • vue中promise的使用及异步请求数据的方法

    下面给大家介绍vue中promise的使用 promise是处理异步的利器,在之前的文章<ES6之promise>中,我详细介绍了promise的使用, 在文章<js动画实现&&回调地狱&&promise>中也提到了promise的then的链式调用, 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法,由此来加深对promise的进一步理解. 背景 进入商品页,商品页的左侧是分类,右侧是具体的商品,一旦进入商品页,就把所有分类的商品

  • vue中实现先请求数据再渲染dom分享

    在项目中遇到了一个问题,下面是vue template中的代码: 我之前的写法是 这样做的结果是下面取dom的操作,取到的dom都是undefined,也就是没有取到. 原因是并没有按照 请求数据->渲染dom->获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解是为什么) 后来我又把请求数据写在了created函数中,把取dom的操作写在mounted函数中,竟然还是先执行取dom的操作(是

  • Android开发之HttpClient异步请求数据的方法详解【附demo源码下载】

    本文实例讲述了Android开发之HttpClient异步请求数据的方法.分享给大家供大家参考,具体如下: 前面一篇Android开发笔记之:AsyncTask的应用较为详细的讲述了Asynctask的原理与应用,这里来结合使用一下HttpClient与Asynctask~ 代码编写如下: 服务器代码我就不写出来了,就是一个用户名和密码~ 1.写一个类HttpClientUtil,来实现HttpClient对象的创建并且返回HttpResponse对象 public class HttpClie

  • Vue组件间数据传递的方式(3种)

    vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div class='container'> <demo2 :msg="msg" @change="change" /> </div> </template> <script> import demo2 from './demo2' export

  • 详解如何使用React Hooks请求数据并渲染

    前言 在日常的开发中,从服务器端异步获取数据并渲染是相当高频的操作.在以往使用React Class组件的时候,这种操作我们已经很熟悉了,即在Class组件的componentDidMount中通过ajax来获取数据并setState,触发组件更新. 随着Hook的到来,我们可以在一些场景中使用Hook的写法来替代Class的写法.但是Hook中没有setState.componentDidMount等函数,又如何做到从服务器端异步获取数据并渲染呢?本文将会介绍如何使用React的新特性Hook

  • jquery ajax加载数据前台渲染方式 不用for遍历的方法

    如下所示: var provinces = res.res; var html = []; var option_select='<option value="" >请选择</option>'; var tpl = '<option value="{1}" data-id="{1}" data-name="{0}">{0}</option>'; html.push(option_

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • 使用$.get()根据选项的不同从数据库异步请求数据

    使用$.get()根据选项的不同从数据库异步请求数据

    Ajax极大地改善了用户体验,对于web2.0来说必不可少,是前端开发人员必不可少的技能. 这个例子是这样的,当从select下拉框选择编程语言时时,根据选项的不同,异步请求不同的函数API描述.这种功能在现在web应用程序中是及其常见的. 我们先来看一下$.get()的结构 复制代码 代码如下: $.get(url, [, data], [, callback] [, type]) //url:请求的HTML页的URL地址: //data(可选),发送至服务器的key/value数据作为Que

  • vue keep-alive请求数据的方法示例

    背景 index页面:首页品牌入口 list页面:商品列表页面 product页面:商品详情页面 从index页面进入list的时候要刷新页面,从product页面返回list的时候不需要刷新页面,所以list使用了keep-alive的属性,keepAlive设置为true,但是开发过程中发现一个问题,从product返回到list的时候,列表页面不是正确的品牌列表,而是之前一次点击的品牌列表.由于每个人遇到关于keep-alive请求数据不正确的问题不同,这里就直接说我的解决办法.希望能给大

随机推荐