VueJs Conditional handlebars

Question

I'm trying to use VueJs conditional rendering using handlebars in vueJs 2.0 as per their documentation but eslint is coming back with and error:

- avoid using JavaScript keyword as property name: "if" in expression {{#if ok}}
- avoid using JavaScript keyword as property name: "if" in expression {{/if}}

VueJs does not seem to be rendering it.

<!-- Handlebars template -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

Answer 1

If you are trying to use Vue.js syntax, the documentation outlines just a few lines down what's done for Vue.js. You would use the v-if directive.

<h1 v-if="ok">Yes</h1>

If like you mentioned, you're wanting to use Handlebars alongside Vue.js, note that both of them use the same {{ curly braces in templates. You may need to change Vue's use of the curly braces like so...

Vue.config.delimiters = ['<%', '%>'];

Answer 2

Either:

Using v-if to conditionally render

<h1 v-if="isVisible"> Yes </h1>

or using v-show to add a hidden attribute to that element style

<h1 v-show="isVisible"> Yes </h1>

either can be used but be careful with v-if since the element won't be in the DOM if the condition is not met.