vue请求数据

最新推荐文章于 2024-07-28 22:04:33 发布

小吴前端

最新推荐文章于 2024-07-28 22:04:33 发布

阅读量104

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_48228724/article/details/115111366

版权

该博客展示了如何在Vue.js应用中使用`el-timeline`组件来呈现动态加载的数据。`asyncData`方法用于从后台获取数据，处理异步请求，并在成功时将数据填充到`specialList`中，展示在时间线项`el-timeline-item`内，每个项包含一个卡片`el-card`，显示从服务器获取的图片。当数据请求失败时，应用会返回404错误。

摘要由CSDN通过智能技术生成

请求数据并处理异步

<el-timeline>
        <el-timeline-item placement="top" v-for="item in specialList" :key="item.id"
              :timestamp="item.name">
          <el-card>
            <el-image :src="item.image_url" fit="scale-down"></el-image>
          </el-card>
        </el-timeline-item>
      </el-timeline>

  data(){
      return{
        specialList:{},
      }
  },
  asyncData(context) {
    let query = JSON.parse(JSON.stringify(context.query))
      return context.$axios
  .get(urlSpecial,{params: query})
    .then(res=>{
      return{
        specialList:res.data
      }
    }).catch(e=>{
      context.error({statusCode: 404, message: '数据请求异常'})
      })

  },