我在Vue中遇到了一个奇怪的行为。请参阅以下vue.html
代码:
<label :text=
"$props.information ? (($props.information.primary || $props.information.secondary) | myFilter) : `No info`">
</label>
这将无法编译,并且Vue会抛出以下警告:
[Vue warn]: Property or method "myFilter" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in Root)
但是,当我没有使用三元运算符时:
<label :text=
"($props.information.primary || $props.information.secondary) | myFilter">
</label>
它编译得很好,并且找到了myFilter
。在boot.ts
中声明了myFilter
。为什么在第一个示例中抛出?在范围上没有区别。
发布于 2019-02-15 12:35:38
单个竖线是bitwise-or operator。Vue做了一些特殊的解析,将其解释为绑定中的“管道到过滤器”,但(我猜测)仅解释为绑定表达式末尾的一系列一个或多个匹配项,而不是中间,就像您的三元使用一样。
发布于 2020-03-23 13:49:03
表达式语法定义为(JavaScript expression) + (prop | filters)
。过滤器只能附加到有效的JavaScript中-将过滤器引入JavaScript是不会发生的。
您已经可以在JavaScript表达式中使用$options.filters.myFilter(prop)
。
请参考此处:https://github.com/vuejs/vue/issues/5449#issuecomment-294337677
https://stackoverflow.com/questions/54706060
复制