Как использовать директиву vuejs при условии?

Я использую в своем проекте директиву https://github.com/DominikSerafin/vuebar. Теперь, в зависимости от некоторых переменных, я хочу использовать его в HTML или нет.

Как это

<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>

Итак, подытожим

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

Есть ли способ, что я могу сказать что-то вроде:

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

Или сделать мою директиву такого рода наследующей этот v-bar и рендеринг?

Источник

2 ответа

Решение

На самом деле вы можете сделать одну вещь. Используйте Директивные Аргументы Крюка.

Вы можете поместить свое условие, основываясь на аргументах хука, внутри кода директивы. И вы можете убедиться, что эти аргументы ловушки являются реактивными, чтобы они могли измениться, когда вы этого захотите.

Напишите вам логику, делать ли что-то или нет для директивы внутри кода директивы в зависимости от значений привязки.

Прочтите это, пожалуйста, прокомментируйте, если вам не ясно.

Источник

Нет, нет способа применить директиву с некоторым условием. Но вы можете попытаться создать и уничтожить пользовательскую полосу прокрутки программно из документации:

Публичные методы.

Вы можете получить к ним доступ из контекста вашего компонента: this.$vuebar, В качестве альтернативы вы можете получить к ним доступ из вашего основного экземпляра Vue: Vue.vuebar, Каждый метод должен передать элемент контейнера прокрутки Vuebar в качестве первого аргумента. Вы можете сделать это легко, используя $refs,

initScrollbar(DOM Element, options)
getState(DOM Element)
refreshScrollbar(DOM Element, options)
destroyScrollbar(DOM Element)
Источник
Другие вопросы по тегам