vue data内の値を　form-itemで表示する

###現在このようにしてデータを取得しているのですが、考えてみると複数形でもないのにfor文を回してdataから値を取ってくるのはおかしいと思ったのですが、この方法以外でdataから値を取得してくる方法はありますか？

<template>
  <div class="info">
    <el-form ref="info" label-width="100px" class="main">
      <!-- TODO
      会社名など本番ではAPI側からとって来たデータを挿入-->
      <el-card
        class="box-card"
        v-for="a in company_info"
      >
        <div slot="header">
          <h2>情報</h2>
        </div>

        <el-form-item label="会社名">
          <el-form-item
            :label="a.name"
          />
        </el-form-item>

        <el-form-item label="部署">
          <el-form-item  
            :label="a.department"
          />
        </el-form-item>

      </el-card>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      company_info: [
        {
          name: "abc",
          department: "abc部"
        }
      ]
    }
  }
}
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

会社が複数あるものと想定して配列で格納してるので、表示する会社が１つであるならばオブジェクトにすれば問題ないかと思います。

vue
1<template>
2  <div class="info">
3    <el-form ref="info" label-width="100px" class="main">
4      <!-- TODO
5      会社名など本番ではAPI側からとって来たデータを挿入-->
6      <el-card class="box-card">
7        <div slot="header">
8          <h2>情報</h2>
9        </div>
10
11        <el-form-item label="会社名">
12          <el-form-item :label="company_info.name"/>
13        </el-form-item>
14
15        <el-form-item label="部署">
16          <el-form-item :label="company_info.department"/>
17        </el-form-item>
18      </el-card>
19    </el-form>
20  </div>
21</template>
22
23<script>
24export default {
25  data() {
26    return {
27      company_info: {
28        name: "abc",
29        department: "abc部"
30      }
31    }
32  }
33}
34</script>
35