CODEWITHSUNDEEP
javascriptfrontendvue.jsweb-frontend
Richard Feliciano
Richard Feliciano

Reputation: 145

How can i pass a property to a directive on vue js?

how can i get the property value on a v-show or v-if directive? i've already try to pass like the example bellow but not succeed.

v-show="cabin >= {{ number }}" number="5"

i'm stuck with this and since vue.js it's kind of new its so hard to find documentation and examples.

Upvotes: 0

Views: 892

Answers (2)

pespantelis
pespantelis

Reputation: 15372

Once you used a custom attribute (number), I guess that you used a component.

So, as he said @user3324298, you need something like this:

Vue.Component('my-comp', {
  template: '#my-template',

  props: ['number'],

  data: function() {
    return {
      cabin: 4
    }
  }
})

But the template, should be something like this:

<template id="my-template">
    <div v-show="cabin >= number" number="5">
        <div>Lorem Ipsum</div>
    </div>
</template>

<my-comp></my-comp>

v-show should be into the scope of component.

Upvotes: 0

notANerdDev
notANerdDev

Reputation: 1286

If you're using Vue Components, then you could do something like this:

Vue.Component('my-comp', {

    template: '#my-template',

    props: [
        'number',
    ],
    data: function(){
        return{
            cabin: 4
        };
    }
}):

and then in your view, use it like this:

<my-comp v-show="cabin >= number" number="5"></my-comp>
<template id="my-template">
    <div>Lorem Ipsum</div>
</template>

Upvotes: 1

Related Questions