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}} 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 = ['<%', '%>']; 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 comparison 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://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
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.
Firstly, You should look at the vue documentation .https://vuejs.org/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>