typescript - 三元运算符和 Vue 过滤器

Question

我在 Vue 中遇到了一个奇怪的行为。请参阅以下 vue.html 代码:

<label :text= 
    "$props.information ? (($props.information.primary || $props.information.secondary) | myFilter) : `No info`">
</label>

这不会编译，Vue 会抛出以下警告:

[Vue 警告]:属性或方法“myFilter”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明响应式数据属性。
(在根目录中找到)

但是，当我不使用三元运算符时:

<label :text=
    "($props.information.primary || $props.information.secondary) | myFilter">
</label>

它编译得很好，并且找到了 myFilter。 myFilter 在 boot.ts 中声明。为什么它会抛出第一个例子？范围没有区别。

Answer 1

单个竖线是 bitwise-or operator . Vue 做了一些特殊的解析，将其解释为绑定(bind)中的“管道到过滤器”，但(我推测)只是在绑定(bind)表达式的末尾出现了一系列一次或多次，而不是在中间，就像这种情况一样与你的三元用法。