带有 vue.js 和 elixir 的苗条模板条件语法答案

【问题标题】：slim template condition syntax with vue.js and elixir带有 vue.js 和 elixir 的苗条模板条件语法
【发布时间】：2018-03-20 14:54:45
【问题描述】：

如何将 vuejs 条件与 vuejs 变量和 elixir 变量结合起来？

<div v-if="vuevar || <%= @conn.assigns.elixirvar %>">

【问题讨论】：

conn.assigns.elixirvar 是否返回 true 或 false？
它实际上是一个字符串，我之前在考虑 - elixirvar = @conn.assigns.elixirvar 然后在条件 v-if="vuevar || elixirvar.length > 0"

【解决方案1】：

conn.assigns.elixirvar 是否返回 true 或 false？

实际上是一个字符串。

如果是字符串，你应该引用它：

<div v-if="vuevar || '<%= @conn.assigns.elixirvar %>'">

否则它将被打印为标识符。

【讨论】：

【解决方案2】：

虽然像@acdcjunior 建议的那样添加引号在简单的情况下会起作用，但当您的字符串本身包含引号或其他特殊字符时，它会中断。正确的做法是使用 JSON 编码器对值进行编码，然后输出：

<div v-if="vuevar || <%= Poison.encode!(@conn.assigns.elixirvar) %>">

现在可以处理布尔值、字符串、数字、数组、对象；基本上所有 JSON 都支持。

【讨论】：