Vue3调用dummyjson接口，product.title无法渲染的原因咨询

• 核心问题：接口返回数据结构与预期不符
  你调用的http://dummyjson.com/products?limit=10接口返回的是一个包含products数组的顶层对象，结构大致如下：

  {
    "products": [{"id":1, "title":"...", ...}, ...],
    "total": 100,
    "skip": 0,
    "limit": 10
  }
  

  如果你直接把axios返回的response.data赋值给了模板中遍历的products变量，那你遍历的其实是这个顶层对象，而非里面的products数组。这时候直接显示product会输出对象的每个键值对（比如"products""total"这些），自然拿不到title属性。

• 解决步骤

  1. 修改请求代码，确保将响应里的products数组赋值给变量：

     import axios from 'axios'
     import { ref } from 'vue'
     
     const products = ref([])
     
     async function fetchProducts() {
       const res = await axios.get('http://dummyjson.com/products?limit=10')
       // 重点：取res.data内的products数组，而非直接赋值res.data
       products.value = res.data.products
     }
     
     fetchProducts()
     

  2. 模板中正常遍历即可：

     <template>
       <div v-for="product in products" :key="product.id">
         {{ product.title }}
       </div>
     </template>
     

• 本地JSON正常的原因
  你本地的JSON应该直接就是产品数组，和接口返回的顶层对象结构不同，所以直接赋值就能正常遍历。

内容的提问来源于stack exchange，提问作者Pavel Lexmaul