laravelから受け取った配列をvue.jsで表示したい

laravelとvueで作業しています
バックエンドから受け取った配列をblade上で中身を取り出して表示したいです。

以下のコードは配列itemsをjson化して受け取っています。

VueJs
1new Vue({
2    el: '#app',
3    data: {
4        message: 'Hello, Vue.js',
5        items: '@json($items)'
6    }
7})
8
9Vue.component('amount-vue',{
10  props: ['items'],
11  template: '<p>@{{items[0]}}</p>'
12})
13
14new Vue({ el: '#test' })

jsonの中身はこんな感じです。(成型してます)

json
1[
2    {
3        "id": 1,
4        "item_name": "apple",
5        "created_at": "2020-07-22T07:22:23.000000Z",
6        "updated_at": "2020-07-22T07:22:23.000000Z",
7        "item_informations": {
8            "id": 1,
9            "item_id": 1,
10            "from": "青森",
11            "created_at": "2020-07-22T07:22:23.000000Z",
12            "updated_at": "2020-07-22T07:22:23.000000Z"
13        },
14        "item_updates": [
15            {
16                "id": 1,
17                "project_id": 1,
18                "Price": 1000,
19                "created_at": "2020-07-22T07:22:23.000000Z",
20                "updated_at": "2020-07-22T07:22:23.000000Z"
21            },
22            {
23                "id": 2,
24                "project_id": 1,
25                "Price": 1200,
26                "created_at": "2020-07-22T07:22:23.000000Z",
27                "updated_at": "2020-07-22T07:22:23.000000Z"
28            },
29            {
30                "id": 3,
31                "project_id": 1,
32                "Price": 1300,
33                "created_at": "2020-07-22T07:22:23.000000Z",
34                "updated_at": "2020-07-22T07:22:23.000000Z"
35            },
36        ]
37    }
38    {
39        "id": 2,
40        "item_name": "banana",
41        "created_at": "2020-07-22T07:22:23.000000Z",
42        "updated_at": "2020-07-22T07:22:23.000000Z",
43        "item_informations": {
44            "id": 1,
45            "item_id": 1,
46            "from": "横浜",
47            "created_at": "2020-07-22T07:22:23.000000Z",
48            "updated_at": "2020-07-22T07:22:23.000000Z"
49        },
50        "item_updates": [
51            {
52                "id": 4,
53                "project_id": 2,
54                "Price": 1000,
55                "created_at": "2020-07-22T07:22:23.000000Z",
56                "updated_at": "2020-07-22T07:22:23.000000Z"
57            },
58            {
59                "id": 5,
60                "project_id": 2,
61                "Price": 1200,
62                "created_at": "2020-07-22T07:22:23.000000Z",
63                "updated_at": "2020-07-22T07:22:23.000000Z"
64            },
65            {
66                "id": 6,
67                "project_id": 2,
68                "Price": 1500,
69                "created_at": "2020-07-22T07:22:23.000000Z",
70                "updated_at": "2020-07-22T07:22:23.000000Z"
71            },
72        ]
73    }
74]

これで

@{{items[0]}} とやれば配列の[0]の中身 ``` { "id": 1, "item_name": "apple", "created_at": "2020-07-22T07:22:23.000000Z", "updated_at": "2020-07-22T07:22:23.000000Z", "item_informations": { "id": 1, "item_id": 1, "from": "青森", "created_at": "2020-07-22T07:22:23.000000Z", "updated_at": "2020-07-22T07:22:23.000000Z" }, "item_updates": [ { "id": 1, "project_id": 1, "Price": 1000, "created_at": "2020-07-22T07:22:23.000000Z", "updated_at": "2020-07-22T07:22:23.000000Z" }, { "id": 2, "project_id": 1, "Price": 1200, "created_at": "2020-07-22T07:22:23.000000Z", "updated_at": "2020-07-22T07:22:23.000000Z" }, { "id": 3, "project_id": 1, "Price": 1300, "created_at": "2020-07-22T07:22:23.000000Z", "updated_at": "2020-07-22T07:22:23.000000Z" }, ] } ```

と表示できるのかと思っていたのですが
実際は以下のように表示されます。

@{{items[1]}} とやると

となり一文字ずつ取得されます。
最終的には

@{{items[1].item_name}}：@{{items[1].item_updates[0]}}円で ``` banana:1000円 ``` みたいな感じで表示されることを想定しています。

文字列として認識されているのでしょうか？
想定通りに表示したいです。
よろしくお願いします。

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

回答1件

ベストアンサー

'@json($items)'
じゃなくて
@json($items)
ですね

投稿2021/06/25 07:19

mikkame

総合スコア5036

ETO3

2021/06/25 09:24

すみません@json($items)の横のシングルクォーテーションを外してみたのですが、中身が [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] となりなぜか[object Object]という表示が出てきています。 @{{items[0]}}では同じように'['が表示されます json化しているのがだめなのでしょうか…