空的 vue prop 导致编译失败答案

【问题标题】：Empty vue prop causes compilation to fail空的 vue prop 导致编译失败
【发布时间】：2018-09-16 04:32:57
【问题描述】：

我有一个看起来像这样的 Vue 组件：

<review :rating="<?= $reviewAverage ?>"></review>

reviewAverage 是一个 int 或设置为 null。当它设置为 null 时，组件不会接收到值并且整个编译失败：

[Vue 警告]：编译模板失败：

虽然这可以归因于我的用户错误，因为我没有使用包装 if 语句检查值，但当整个页面突然变白时，这是一个真正的问题。

有什么办法可以防止这种行为发生吗？组件本身破坏它对我来说没什么大不了的，至少因为我没有得到空白页。

【问题讨论】：

这是什么语法<?= $reviewAverage ?>???
您正在将 php 变量用于 javascript(vue.js) 实例。我认为无法做到。因为 :rating 会查找字符串以便传递“某物”，或者将在该组件中查找属性。
我在Laravel-Mix repo 上见到你。我假设您使用的是 Laravel，为什么不使用刀片？如果是，请使用@{{ reviewAverage }}
您可以使用小型运算符if：$result = $condition ? 'if true' : 'if false'。代码示例：<review :rating="<?= $reviewAverage ? $reviewAverage : 0 ?>"></review>
@RuChernChong 逐字指令不会改变任何东西，它仍然会在null 值上中断。从长远来看，将其更改为内联解决方案显然也不可行。

【解决方案1】：

您只需确保不会出现:rating=""。 <?= null ?> 不会输出任何内容。

如果它为空，那么如何将其设置为空字符串

<review :rating="<?= $reviewAverage !== null ? $reviewAverage : '' ?>"></review>

如果它为null，这将是生成的html

<review :rating="''"></review>

【讨论】：