当传递数据通过道具Laravel,Vue的组件不可渲染,数据转储

问题描述 投票:1回答:2

我正奇怪的意外的行为,我似乎无法找到一个解决方案,这是它发生第二次。

每当我试着通过道具来传递Laravel数据到Vue的组成部分,而不是分配价值的道具,它似乎转储数据输出到DOM,然后将组件从未呈现。

在.vue一个文件组件,我定义像这样我的道具:

props: {
    businesses: {
        type: Array,
        required: true
    },
},

在我的Laravel控制器,我有像这样的数据

$a = new \stdClass();
$a->name = 'tester';
$a->id = 5;
$a->desc = "This is getting a bit ridiculous now";

$b = new \stdClass();
$b->name = 'Boo ya';
$b->id = 2;
$b->desc = "Certainly really annoying to me";
$testStuff = [$a, $b];

return view(
    "businessListing",
    compact('testStuff')
);

在我的Laravel刀片模板,我有我的组件安装程序是这样的:

<business-listing :businesses="@json($testStuff)"></business-listing>

也试过这样,即使应该是相同的,并且它提供了相同的结果。

<business-listing :businesses="{!! json_encode($testStuff) !!}"></business-listing>

然后,而不是该组件被渲染,我看到了JSON字符串的混搭版,安装()函数永远不会触发,但在控制台也没有错误。

“:” 测试仪 “ ”ID“:5 ”降序“: ”这个=“” 为= “” 渐= “” 一个= “” 比特= “” 荒谬= “” 现在 “},{” 名称“: “嘘=” “雅”, “ID”:2, “说明”: “肯定=””真的= “” 讨厌= “” 到= “” 我 “}]”= “”>

Component Error

如果我通过在一个空的阵列,所述组件呈现,安装为预期的()的火灾,和转储空数组到控制台。

Component Success

有其他人遇到这个?我无法弄清楚什么是错误的,我的生活。我应该提到 - Laravel 5.7 / 7.1 PHP,Vue的2.5.17。谢谢你的帮助。

laravel vue.js
2个回答
1
投票

你错过了周围'{ ... }'单引号:

<business-listing :businesses="'{!! json_encode($testStuff) !!}'"></business-listing>

1
投票

@ DigitalDrifter的回答激起了我与报价混乱。

看来,具有第一组双引号“”是什么问题?

如果我只是用单引号,似乎工作。我不知道为什么是这样的话,任何其他的例子,我已经看了看,似乎兼得,作为DigitalDrifter的节目。工作下面的例子。

<business-listing :businesses='{!! json_encode($testStuff) !!}'></business-listing>
© www.soinside.com 2019 - 2024. All rights reserved.