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
2
votes
2 answers
Storybook + Vue3 - Error when trying to use custom directives
When trying to use custom directives with Vue3 and storybook, I get this error:
I don't understand the issue and have no idea where to even start to look. I'm still very new to Vue and storybook.
I created a small test directive just to make sure…
Deshen
- 73
- 8
2
votes
0 answers
How to toggle between two components by using v-if directives in vue.js?
i have two components Register.vue and Login.vue ,Register.vue is responsible for registration it will contain two headings like Login and Signup ,if the user clicks on Login heading inside the Register page it's automatically hide the…
Sravani
- 367
- 1
- 3
- 17
2
votes
1 answer
How to use Vue directive in external file and import into components?
I'm using Vuelidate in a project and when the user types something I set a timeout to wait for validation. I tried to use mixins and it was successful, but for good habits I need to create a Vue directive without registering it globally, and use…
Igoohd
- 136
- 7
2
votes
2 answers
Escape key press not working with second modal window in vuejs
I have a table with multiple rows, each row has a button, on clicking the button, a modal window opens contains form element.
After submitting the form, second window opens for confirmation and first window closes.
Below code is my sample work…
htoniv
- 1,658
- 21
- 40
2
votes
1 answer
Custom Vue Directive For v-bind
I currently have something like this:
kzaiwo
- 1,558
- 1
- 16
- 45
2
votes
2 answers
Handle VueJS event only when key is pressed
I use VueJS component provided by 3rd-party library, which has its own events. I can handle such events as usual with "v-on" directive and specifying interesting event name, like that:
lesovsky
- 326
- 2
- 14
2
votes
2 answers
How to create a npm package with multiple vue directives? Or should I create one package per directive?
I am able to create an npm package by exporting a single vue directive in the src/index.js file. But how can I create a package that lets you use multiple vue directives. I am not able to export two vue directives in the same index.js file.
export…
manb
- 105
- 10
2
votes
2 answers
VueJS TypeError: alert is not a function
I'm trying to learn VueJS. I've made my first vue and I'm testing the directives. Here is my code:
Partie 1 Chapitre 3 - Vue Mart
Akame14
- 151
- 1
- 2
- 12
2
votes
1 answer
Vuejs - Issue when removing a component via directives and the mounted/created event is being executed
I wanted my directive to work as v-if since in my directive I have to check access rights and destroy the element if it does not have access.
Here is my code
Vue.directive('access', {
inserted: function(el, binding, vnode){
//check…
user3910487
- 49
- 5
2
votes
1 answer
Why does Vue's v-model update the data much more later after the click event was fired?
I have a very small checkbox component which I was trying to listen to via the @click event. But the v-model data updates 7ms later than the event callback. So I had to remove the @click listener and to add a computed property/method of the checked…
FullStack Alex
- 1,783
- 19
- 31
2
votes
2 answers
How to fix this error: "vnode.context[binding.expression]"?
I'm building an app using VueJS. I have a component and I want to know when I click outside of it. I searched for a solution and I find this answer on Stack Overflow, but I get this error when I implemented the answer:
TypeError:…
Oussama He
- 555
- 1
- 10
- 31
2
votes
1 answer
How to display a custom loading bar and control it with custom directive in vuejs?
I want to display a loading bar inside a div tag and control its display with my custom directive in vuejs.
for example, this is my tag and I want to hide all of the content inside it and only show loading bar inside it.
template :
…
MohammadHosein
- 133
- 1
- 1
- 11
2
votes
1 answer
How can I access my Vue component's data property using a string as it's property name in a v-model directive?
The same way I'm able to access an object's property using bracket notation by utilizing a string naming the property.
For example
const foo = {
"bar[foobar]": "hello world"
}
foo["bar[foobar]"] // "hello world"
How can I do the same in a Vue SFC…
john-raymon
- 306
- 1
- 7
- 20
2
votes
1 answer
Returning variables from a Vue.js directive
Vue.js has a built-in directive called v-for which is used to literate over list.
HTML code
- {{ item.message }}
Tharindu Sathischandra
- 1,654
- 1
- 15
- 37
2
votes
0 answers
How to clean cache from a vue.js website?
So i've built a website with a vue.js. It's deployed on AWS s3 bucket that lies behind a CloudFront distribution. Recently i've found out that some users are seeing 2 week old version of the website. This is a big issue since i am updating website…
DaX
- 94
- 1
- 11