Vueで連想配列が表示できない

Question

Vue初心者です。

配列を表形式で表示させたく、記述をしているのですが表示されません。
調べてもどこを修正すればいいのかわからず困っています。

宜しくお願いいたします。

<div id="users">
              <div v-for="user in userData" :key="user.title">    
                <tr><th>{{ user.title }}</th>{{user.contents}}</tr>
              </div>
            </div>

data: {
      userData: [
        {title:"姓",contents:"佐藤"},
        {titlte:"名",contents:"太郎"}
      ]
    }

Answer 1

すみません。
配列を宣言する場所が間違っていました。

Answer 2

Vue以前のWebサイト構築の基本を見直して下さい。すごい基本的な部分でコケてます…。

tableタグを設定していないのに、trタグもtdタグも見えないですよ。あと、テーブルタグの記述がデタラメすぎます。

あと、気になるのはdataをreturnで返していないことですかね…。

Comments

[bkprg]

すみません。タグを追加しましたが見えません。

あと、別の人が作ったこのソースコードだと見れるんですが、なぜですか？
（配列の中身はAPIから取得しています）

```
<b-card v-for="(value, key) in item" v-bind:key="value.id">
<!-- 項目表示 -->
<td>{{ key }}</td>

<!-- 値表示 -->
<td>{{ value }}</td>
</b-card>
```

[FKM]

修正したタグを提示してください。おそらくループ外のところに置いているんじゃないでしょうか？
あと、thタグ、tdタグをきちんと示してもう一度見直してみて下さい。

そのソースだと、色々問題がありすぎます。

[bkprg]

このように修正しました。

<b-card v-for="user in userData" :key="user.title">
<table>
<tr><th>{{ user.title }}</th>{{user.contents}}</tr>
</table>
</b-card>

[bkprg]

すみません。
教えてくださったのに大変恐縮ですが、いただいた回答のようなエラーは出ていません。
<tr><th>タグは表示を縦にしたいため、このように書いています。
参考：https://techacademy.jp/magazine/34474

[FKM]

それなら、情報が不足しています。もっとテンプレート部分、データ部分を提示してもらえないと、推理でしかアドバイスできません。

[bkprg]

すみません。自己解決しました。
配列が定義されていないというエラーが画面のほうで出ていたので、記載する場所を変えて表示されるようになりました。
後で解決方法に追記しておきます。

[FKM]

そもそも、これ、なにかエラー表示されてませんか？自分がテストした限り普通に見えています。なので、エラー原因から突き止めた方が早いです。考えられるエラー候補もいくつかあります。

[bkprg]

ターミナル側ではエラーはなく、画面側のConsoleで配列の定義がされていないというエラーが出ていました。
Chromeの検証側を先に確認しておけばよかったです。
だた、WEB周りに関してはまだ経験が浅く、基本的な構文の書き方についてもまだまだ不安がありますので、もっと勉強しようと思います。
ご迷惑をおかけしてしまいすみませんでした。

[FKM]

その前に
he "data" option should be a function that returns a per-instance value in component definitions.
って出てませんか？

それだとdataに格納された変数をreturnで返していないってエラーで、returnで返さない変数をテンプレートで使おうとすると発されます。

[bkprg]

そのようなエラーは出ていなかったと思います。
data(){}内で変数や配列が宣言されていたのに、data:{}を新たに作成し、そこで配列を宣言していたのが悪かったようです。
userDataのほうでundefineエラーが出ていました。