空vue prop导致编译失败

Question

我有一个Vue组件，如下所示：

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

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

  

[Vue警告]：无法编译模板：

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

是否有任何可以阻止此行为发生的事情？组件本身打破了它对我来说不是一件大事，至少我没有得到空白页。

Answer 1

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

那么如果将它设置为空

，如何将其设置为空字符串

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

如果它为null，则为生成的html

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