javascript - VueJs Conditional handlebars - Stack Overflow

I'm trying to use VueJs conditional rendering using handlebars in vueJs 2.0 as per their documentation but eslint is ing 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}}

I'm trying to use VueJs conditional rendering using handlebars in vueJs 2.0 as per their documentation but eslint is ing 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}}

• javascript
• vue.js
• eslint

Share Improve this question Follow edited Jul 14, 2022 at 0:58 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Aug 8, 2017 at 3:13 ottz0ottz0 2,60577 gold badges3030 silver badges5151 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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 = ['<%', '%>'];

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.

I believe that is simply to document that the conditional does not go on a parent tag, but rather it is placed directly on the node that you want to conditionally display.

In other words its simply a parison not part of Vue.js markup, but rather part of Handlebars.

Vue conditional rendering syntax

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

Details in original docs. https://v2.vuejs/v2/guide/conditional.html#v-if-vs-v-show

Firstly, You should look at the vue documentation .https://v2.vuejs/v2/guide/conditional.html#v-if-vs-v-showjs and by the way, you can use "v-if" and "v-show"attributes, in flowing related to examples.

<h1 v-if='isShow'>Test</h1>
<h1 v-show='isShow'>Test</h1>

For anyone ing here from a search trying to conditionally render inside {{ }} braces, you could always use a puted property:

import { puted } from 'vue';

<script setup>
  const submitButtonText = puted(() => {
      return props.formObject ? 'Save' : 'Create';
  });
</script>

<template>
  <form>
    <button type="submit">
      {{ submitButtonText }}
    </button>
  </form>
</template>

v-if and v-if-else work perfect for large elements, but this is great for simple one-line conditional text.