如何使用 nuxtjs 和 v-for 访问嵌套的 json 对象属性

Question

我想在 nuxtjs 中使用 v-for 访问 嵌套对象，我有一个使用 Axios 的获取请求 API 并且响应数据存储在名为 CategoriesData 的变量中，请看下面的代码。

asyncData(context) {
return axios
  .get("https://lavazemesakhteman.com/wp-json/wc/v3/products/categories", {
    params: {
      per_page: 10,
      page: 1,
    },
  })
  .then((res) => {
    return {
      CategoriesData: res.data,
    };
  })
  .catch((e) => context.error(e));}

至此，一切正常，所有 API 响应都存储在 CategoriesData 中，当我想遍历嵌套对象并显示或使用其属性时，我的问题就开始了，注意到下面的代码：

 <ul>
  <li v-for="categories in CategoriesData" :key="categories.id">
    {{ categories.name }}
    {{ categories.image }}
  </li>
</ul>

结果是：

我想显示和使用 categories.image[0].src 例如 src 而不是整个对象，API 响应如下图所示：

这是 JSON 代码的一部分：

     "display": "default",
    "image": {
        "id": 10443,
        "date_created": "2022-04-30T05:45:44",
        "date_created_gmt": "2022-04-30T01:15:44",
        "date_modified": "2022-04-30T05:46:36",
        "date_modified_gmt": "2022-04-30T01:16:36",
        "src": "https://lavazemesakhteman.com/wp-content/uploads/2022/04/Benkan-Connections2.jpg",
        "name": "Benkan Connections",
        "alt": "فروشگاه لوازم ساختمان عرضه کننده محصولاتی باکیفیت و همچنین با بهترین قیمت در تمام کشور هست."
    },

什么时候使用categories.image.src:

   <ul>
  <li v-for="categories in CategoriesData" :key="categories.id">
    {{ categories.name }}
    {{ categories.image.src }}
  </li>
</ul>

我得到以下错误:

Cannot read properties of null (reading 'src')

Answer 1

您可以使用与获取第一个字段相同的 . 表示法来访问嵌套数据，因此您需要编写类似 {{ categories.image.src }}.

的内容

<template>
  <ul>
    <li v-for="category in CategoriesData" :key="category.id">
      {{ category.name }}
      <img :src="category.image.src">
    </li>
  </ul>
</template>

Note: You named the variable in your v-for as a plural, while the data it holds is singular. As each item in the list of categories is an individual category.

Answer 2

前往 API 本身，位于此处：http://lavazemesakhteman.com/wp-json/wc/v3/products/categories

表明有时您的图像可能 null，因此检查此异常是一件好事

<img v-if="category.image" :src="category.image.src">

根据您的项目及其设置方式，您甚至可以像这样使用 Optional Chaining

<img :src="category.image?.src">

不然这种更丑的形式也可以

<img :src="category.image && category.image.src">

如何使用 nuxtjs 和 v-for 访问嵌套的 json 对象属性

how to access nested json object property using nuxtjs and v-for

vue.js

axios

v-for

nuxt.js

如何使用 nuxtjs 和 v-for 访问嵌套的 json 对象 属性

how to access nested json object property using nuxtjs and v-for

vue.js

axios

v-for

nuxt.js

如何使用 nuxtjs 和 v-for 访问嵌套的 json 对象属性