数据请求到了,但是一直渲染不上,麻烦老师帮忙看下

数据请求到了,但是一直渲染不上,麻烦老师帮忙看下

<template>

      <div class="nearby">

    <h3 class="nearby__title">附近店铺</h3>

    <div

      class="nearby__item"

      v-for="item in nearbyList"

      :key="item._id"

    >

      <img :src="item.imgUrl" class="nearby__item__img">

      <div class="nearby__content">

        <div class="nearby__content__title">{{item.name}}</div>

        <div class="nearby__content__tags">

          <span class="nearby__content__tag">月售: {{item.sales}}</span>

          <span class="nearby__content__tag">起送: {{item.expressLimit}}</span>

          <span class="nearby__content__tag">基础运费: {{item.expressPrice}}</span>

        </div>

        <p class="nearby__content__highlight">{{item.slogan}}</p>

      </div>

    </div>

  </div>

</template>

<script>

import { ref } from 'vue'

import { get } from '../../utils/request'

export default {

  name: 'Main',

  setup () {

    const nearbyList = ref([])

    const getNearbyList = async () => {

      const result = await get('/api/shop/hot-list')

      console.log(result)

      if (result?.errno === 0 && result?.data?.length) {

        nearbyList.value = result.data

      }

    }


    getNearbyList()

    return { nearbyList }

  }

}

</script>

相关截图:

https://img1.sycdn.imooc.com//climg/61e0271509139d4513630751.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2022-01-14 17:50:00

同学你好,非常抱歉是老师的问题,除了首字母大小写问题,后面也是不一样的,一个是Error,一个是errno。

现在改了首字母后,后面不一样,所以也不会渲染。有两种方式:

1、链接中属性改为errno

2、代码中改为error,例如

https://img1.sycdn.imooc.com//climg/61e14734093871a405790138.jpg

https://img1.sycdn.imooc.com//climg/61e1473a09c2616c03950490.jpg

自己再测试下。

好帮手慕星星 2022-01-14 10:09:19

同学你好,数据接口是自己创建的吗?输出的数据属性为Error,首字母是大写的

https://img1.sycdn.imooc.com//climg/61e0db13092e921405350148.jpg

而代码中判断用的是小写的

https://img1.sycdn.imooc.com//climg/61e0daf9097c16ba06210133.jpg

所以渲染不上数据,自己修改试试。如果还是渲染不上的话,建议将自己创建的完整链接粘贴上来,便于帮助测试。

祝学习愉快!

  • 提问者 L_Tomato #1

    是自己创建的,改了还是不行,麻烦老师再看下

    这是自己创建的数据接口链接

    https://www.fastmock.site/mock/735ff82834ed2c1dbb34b126e9ecdb67/jingdong/api/shop/hot-list

    2022-01-14 14:09:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师