A Vue.js directive can only appear in the form of a prefixed HTML attribute that takes the following format:
<element
prefix-directiveId="[argument:] expression [| filters...]">
</element>
Common directives are v-if , v-for, v-model...
Questions tagged [vue-directives]
218 questions
368
votes
5 answers
Difference between v-model and v-bind on Vue.js?
I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value.
I completed it using v-model but, the instructor chose v-bind:value, and I don't understand why.
Can someone give me a simple…
Gustavo Dias
- 3,811
- 3
- 11
- 6
241
votes
4 answers
Difference between @click and v-on:click Vuejs
The questions should be enough clear.
But I can see that someone use:
Someone use:
But really what is the difference between the two (if exists)
LorenzoBerti
- 6,704
- 8
- 47
- 89
30
votes
3 answers
A custom directive similar to v-if in vuejs
I'm writing a custom directive in vue.
I want it to work like v-if but it will have a little logic going inside it. Let me explain with an example:
It will check the permission and will show or…
Yves
- 3,752
- 4
- 29
- 43
29
votes
2 answers
VueJS: vs or related for grouping elements for conditional rendering
In Vue.js, if you want to conditionally render multiple elements via a v-if/v-else-if directive you can wrap them inside tags and apply the directive to the tag, as explained here. However, you can also do the same with …
Colin Michael Flaherty
- 786
- 2
- 7
- 15
In Vue.js, if you want to conditionally render multiple elements via a v-if/v-else-if directive you can wrap them inside tags and apply the directive to the tag, as explained here. However, you can also do the same with
…
Colin Michael Flaherty
- 786
- 2
- 7
- 15
16
votes
2 answers
Vuejs . What do $v And $event denotes in Vuejs?
What do $v and $event denote in Vue.Js? What and in which situations do we use these. Please elaborate in detail with examples too.
Sandeep Ghimire
- 169
- 1
- 1
- 3
15
votes
4 answers
Migrating "detect click outside" custom directive from Vue 2 to Vue 3
Based on this question Detect click outside element and this answer https://stackoverflow.com/a/42389266, I'm trying to migrate the directive from Vue 2 to Vue 3. It seems that binding.expression and vnode.context not exists more. How can I make it…
Sauron
- 2,156
- 5
- 17
- 20
12
votes
5 answers
Vue JS - How to restrict special characters in an input field?
What's the best way to implement text-character restrictions in Vue JS ? I am looking to achieve with RegExp so that the user will not be allowed to type the symbols in the field.
vinoth
- 186
- 1
- 2
- 9
10
votes
3 answers
Decimal Formatting in Vue Framework
I am new to Vue Framework. My requirement is to add money currency formatting in an input box.
Formatting:
I need to add a decimal with two zeros on focus out and remove zero at focus in. The v-modal value should not change as this format is just…
Shikha Rani
- 125
- 1
- 1
- 6
10
votes
4 answers
Vue: need to disable all inputs on page
I'm developing an app that has different license types, and according to the license we need to disable/enable inputs.
One way is to put a conditional :disabled for each input but that's a lot of work and error prone, since we might forget to put it…
Tomer
- 17,787
- 15
- 78
- 137
10
votes
1 answer
VueJS Custom directive + emit event
I need to $emit an event from a custom directive.
Is it possible?
directive.js:
vnode.context.$emit("myEvent") // nothing append
vnode.child.$emit("myEvent") // error
vnode.parent.$emit("myEvent") // error
component.vue:
Brice Chaponneau
- 564
- 2
- 9
- 22
10
votes
4 answers
How to remove parameter from url using vue-router
I have multiple parameters in url. I am adding new parameter in url with following code:
this.$router.push({query: Object.assign({}, this.$route.query, {cities: '1,45'})});
But when I unselect cities, still it keep last id with cities param in…
ghulamjafar
- 111
- 3
- 9
9
votes
2 answers
Vue js how to prevent button clicked on two times continuously
I have a button, user can click the button more than one time if he want. But when the user click the button, he might accidentally click twice, in such cases second click should be blocked by the code.
If I further explain. They should be a small…
margherita pizza
- 6,623
- 23
- 84
- 152
8
votes
1 answer
Multiple Elements with same custom directive vuejs
Hey there, I have some elements with the same custom directive but different values in my page.
I want to get all elements with that directive to process on them.
When I use this code:
Vue.directive('can', function (value) {
…
Katerou22
- 777
- 5
- 19
7
votes
4 answers
Vue.js v-model with dynamic list of radio buttons
I am trying to make a reuseable vue radio-button component that will take a variable name, and an object containing labels and values, then render a list of radio buttons using v-for.
I have had success with each half of the problem, but have not…
Tom
- 364
- 1
- 4
- 13