：書いたコード

vue
1<template lang="pug">
2  section
3    v-container
4      header.text-center
5        h2.section-title 機能一覧
6    v-container
7      v-row
8        v-col(v-for="item in items" :key="item.id" cols="12" sm="6" md="4" lg="3")
9          v-card
10            v-img(:src="item.image.url")
11            v-card-title {{item.title}}
12            v-card-text {{item.content}}
13            v-card-text
14              v-row
15                v-chip(v-for="app in item.applications" :key="app.id") {{app.appName}}
16              v-row
17                v-chip(v-for="utilizationscene in item.utilizationscenes" :key="utilizationscene.id") {{utilizationscene.scene}}
18
19</template>
20
21<script>
22import axios from 'axios'
23export default {
24  data () {
25    return {
26      items: []
27    }
28  },
29  mounted () {
30    this.asyncData()
31  },
32  methods: {
33    asyncData () {
34      axios
35        .get('https://hogehoge.microcms.io/api/v1/features', {
36          headers: { 'X-API-KEY': process.env.API_KEY }
37        })
38        .then((res) => {
39          this.items = res.data.contents
40        })
41    }
42  }
43}
44</script>
45

：取得できる値

json
1{
2    "id": "peropero",
3    "createdAt": "2020-11-09T02:05:44.295Z",
4    "updatedAt": "2020-11-11T08:29:08.369Z",
5    "publishedAt": "2020-11-09T02:05:44.295Z",
6    "title": "タイトル",
7    "content": "テキスト文",
8    "image": {
9        "url": "hogehoge.png"
10    },
11    "applications": [
12        {
13            "id": "id01",
14            "createdAt": "2020-07-20T00:49:01.657Z",
15            "updatedAt": "2020-11-09T02:03:58.089Z",
16            "publishedAt": "2020-07-20T00:49:01.657Z",
17            "appName": "app name",
18            "url": "https://www.hogehoge.com/"
19        }
20    ],
21    "utilizationscenes": [
22        {
23            "id": "id02",
24            "createdAt": "2020-11-05T02:35:54.418Z",
25            "updatedAt": "2020-11-05T05:19:19.102Z",
26            "publishedAt": "2020-11-05T02:35:54.418Z",
27            "scene": "Sample01"
28        },
29        {
30            "id": "id03",
31            "createdAt": "2020-11-05T02:36:29.536Z",
32            "updatedAt": "2020-11-05T05:18:42.513Z",
33            "publishedAt": "2020-11-05T02:36:29.536Z",
34            "scene": "Sample02"
35        }
36    ]
37}

ここの配列をv-bind:classで表示させていのですが

json
1    "applications": [
2        {
3            "id": "id01",
4            "createdAt": "2020-07-20T00:49:01.657Z",
5            "updatedAt": "2020-11-09T02:03:58.089Z",
6            "publishedAt": "2020-07-20T00:49:01.657Z",
7            "appName": "app name",
8            "url": "https://www.hogehoge.com/"
9        }
10    ],

このように追加しても何も表示されません。
v-card(:class="item.applications.id")

vue
1<template lang="pug">
2  section
3    v-container
4      header.text-center
5        h2.section-title 機能一覧
6    v-container
7      v-row
8        v-col(v-for="item in items" :key="item.id" cols="12" sm="6" md="4" lg="3")
9          v-card(:class="item.applications.id")
10            v-img(:src="item.image.url")
11            v-card-title {{item.title}}
12            v-card-text {{item.content}}
13            v-card-text
14              v-row
15                v-chip(v-for="app in item.applications" :key="app.id") {{app.appName}}
16              v-row
17                v-chip(v-for="utilizationscene in item.utilizationscenes" :key="utilizationscene.id") {{utilizationscene.scene}}
18
19</template>

v-card(:class="item.applications")にすると配列の中身がすべて出力されてしまいます。
applicationsのなかにあるidだけを表示するのにはどのような方法があるでしょうか？
アドバイス頂ければと思います。

（情報が足りなければ追記いたします。）

DaikiOjima

2020/11/20 15:23

`applications` は配列なので、`applications.id` では値を取得することはできません。 `applications` に含まれるitemが1つ固定で0番目のidを表示するということであれば、次のように取得することができます。 ``` v-card(:class="item.applications[0].id") ``` 最終的に期待する状態(v-cardに対してどのようなclassがふかされた状態を期待するのか)がわかると回答が得られるかと思います。