Vue + Laravel：在刀片文件中作为道具传递时，字符串被剥夺

Question

我有一个带有以下内容的刀片文件：

$customerId = time() . rand(0, 100000) . '-' . $redItem->id;

<Flashbar
     :user-ref={!! json_encode($customerId) !!}
/>

我的问题是Flashbar组件设置为将userRef作为String类型的道具，但它剥离了time() . rand(0, 100000)之后的所有内容……不包括-和redItem ->之后编号。
我一直在使用Flashbar上的Vue devtools检查道具，它只是时间和随机数。

Answer 1

如下面的评论所述，我认为这可能是由于vue将您的$customerId解释为一个等式。

$customerId = time() . rand(0, 100000) . '-' . $redItem->id;

如果$redItem的ID为1，则将生成类似155743641671228-1的东西

但是，当您对道具进行v绑定时（您使用的是：简写），提供给它的任何输入都将首先由javascript解释。因此，当您检查道具时会看到以下总和：155743641671228-1（155743641671227）。

因此，如果您在生成客户ID时用非javascript运算符替换“-”，则应该可以。

例如：

$customerId = time() . rand(0, 100000) . ':' . $redItem->id;

我本以为删除v-bind也会使它起作用，但是我可能错了...

希望有帮助！

Answer 2

这是一个字符串，无需对其进行json编码。也不存在将其绑定为vue实例中变量的原因。

<Flashbar user-ref="{{ $customerId }}" />