Symfony中Twig布尔值无法正确传递给Vue组件的问题

问题根源 #

Twig模板直接输出布尔值时，true会被渲染成字符串"1"，false会被渲染成空字符串。而Vue的v-bind（:xxx语法）会将这些值解析为数字或空值，不符合组件Boolean类型的props要求，因此触发类型错误。

修复方案 #

可以通过以下两种方式正确传递布尔值：

方案1：使用json_encode过滤器

利用Twig的json_encode将布尔值转换为Vue能识别的布尔字面量：

<company-support 
  :items="{{ items|json_encode }}"
  :is-my-analytics-active="{{ isMyAnalyticsActive|json_encode }}"/>

json_encode会把true转为"true"，false转为"false"，Vue解析时会自动识别为布尔类型。

方案2：使用三元表达式输出布尔字面量

手动输出true或false字符串：

<company-support 
  :items="{{ items|json_encode }}"
  :is-my-analytics-active="{{ isMyAnalyticsActive ? 'true' : 'false' }}"/>

验证效果 #

修改后，Vue组件会收到正确的布尔类型值，不再出现类型校验错误或空值报错。

内容的提问来源于stack exchange，提问作者Anarkie