我坚持在 vue 上显示这个 api

Question

我开始学习如何使用 API 但我卡住了，所以这是 API，http://localhost:1337/handies

    {
    "id": 1,
    "name": "John Doe",
    "price": "7€/h",
    "description": "Nice guy che vuole lavorare molto e non ha paura di sporcarsi le mani",
    "created_at": "2021-05-05T07:57:29.038Z",
    "updated_at": "2021-05-05T09:16:21.476Z",
    "categories": [
        {
            "id": 2,
            "name": "Idraulico",
            "created_at": "2021-05-05T08:34:52.646Z",
            "updated_at": "2021-05-05T08:34:58.981Z"
        }
    ]
},

现在，如果我用 vue 想可视化我写的名字 {{handies.name}} 并且它工作得很好，但是如果我想打印类别名称“idraulico”，我尝试 {{handies.categories.name}} 但不起作用...显示类别名称的方式是什么？我使用 vue、axios 和 strapi。

感谢大家。

Answer 1

应该是{{handies.categories[0].name}}打印第一类的名字

要打印它们，您可以使用 v-for 指令，例如

<div v-for="category in handies.categories" :key="category.id">
   {{ category.name }}
</div>

Answer 2

您可以使用以下格式。

   <div v-for="handy in handies" :key="handy.id">
      <div>{{ handy.name }}</div>
      <div>Categiries</div>
      <div v-for="category in handy.categories" :key="category.id">
        <div>{{ category.name }}</div>
      </div>
    </div>

Answer 3

categories 是一个数组，你必须指定索引。我建议你学习一点基本的编程

我坚持在 vue 上显示这个 api

I'm stuck with displaying this api on vue

api

vue.js

strapi

axios