从Laravel通过道具传递数据时，Vue组件未渲染，转​​储数据

Question

我收到奇怪的意外行为，似乎无法解决，这已经是第二次了。

每当我尝试通过道具将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 Blade模板中，我的组件设置如下：

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

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

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

然后，我看到的是json字符串的混搭版本，而不是正在渲染的组件，Mount（）函数从不触发，但在控制台中也没有错误。

“：”测试人员“，” id“：5，” desc“：” this =“” is =“” Getting =“” a =“” bit =“” ridiculous =“” now“}，{” name“：” boo =“” ya“，” id“：2，” desc“：” certainly =“” true =“” annoying =“” to =“” me“}]” =“”>

如果我传入一个空数组，该组件将渲染，mounted（）会按预期方式触发，并将该空数组转储到控制台。

还有其他人遇到吗？我无法弄清楚我一生中有什么问题。我应该提到-Laravel 5.7 / PHP 7.1，Vue 2.5.17。感谢您的帮助。

Answer 1

您缺少'{ ... }'周围的单引号：

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

Answer 2

@DigitalDrifter的答案启发了我弄乱引号。

问题似乎在于使用第一组双引号“”吗？

如果我仅使用单引号，那似乎可行。我不确定为什么会这样，正如DigitalDrifter的演示所示，我看过的任何其他示例似乎都兼有。下面的工作示例。

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