CODEWITHSUNDEEP
vue.jsvuejs2vue-directives
pregmatch
pregmatch

Reputation: 2647

How to use vuejs directive on condition?

I am suing https://github.com/DominikSerafin/vuebar directive in my project. Now depending on some var i want to use it in html or not.

Like this

<div v-bar>
//this div contains huge html like 1200 lines of code and doing
// v-if is not option since i will have to duplicate all of its content
</div>

So to sumarize:

<div v-bar v-if="somevar"></div> // is not and option bceuse that div contains 1200 of code

Is there any way that i can say something like:

<div some_var ? v-bar:''></div>

Or to make my directive that sort of inherits that v-bar and renders?

Upvotes: 2

Views: 2474

Answers (2)

Ankit Kumar Ojha
Ankit Kumar Ojha

Reputation: 2384

Actually you can do one thing. Use Directive Hook Arguments.

You can put your condition based on the hook arguments inside the directive's code. And you can make sure the those hook arguments are reactive so that it could change when you want it to.

Write you logic whether to do something or not for directive inside the directive's code depending upon the binding values.

Read this, please comment if you are not clear.

Upvotes: 2

Max Sinev
Max Sinev

Reputation: 6034

No, there is no way to apply directive with some condition. But you can try to create and destroy custom scroll bar programatically, from docs:

Public methods.

You can access them from your component context: this.$vuebar. Alternatively you can access them from your main Vue instance: Vue.vuebar. Every method needs to have passed Vuebar scroll container element as the first argument. You can do that easily using $refs.

initScrollbar(DOM Element, options)
getState(DOM Element)
refreshScrollbar(DOM Element, options)
destroyScrollbar(DOM Element)

Upvotes: 0

Related Questions