223 questions
0
votes
1
answer
55
views
Using v-model for nested form?
It's very well possible this isn't meant to work, but I'm trying to learn Vue and fail to make a nested form. The usecase is that I want my user to order various amounts of different types of tickets;
...
0
votes
1
answer
36
views
How to reactivate my custom directive when my component is updated?
I have a problem with updating my custom directive v-icon. In my component I have this element:
<div class="px-6 pt-6 pb-5 font-bold border-b border-gray-200" v-icon.right="'...
1
vote
2
answers
62
views
How to Use Vue Directives In Combination with Vue-i18n?
One of my sentences which I localized with i18n contains an anchor tag, and this element should trigger another modal. But, when I use @click or v-on:click localization gets broken.
Below is my ...
0
votes
1
answer
47
views
Directive for German decimal inputs
I'm searching for an implementation of a vue3 directive for german decimal values. The challange that I'm facing is that I need to display the german decimal but store the correct decimal with ".&...
0
votes
0
answers
200
views
How to create unit test in Jest with a Vue custom directive?
I have a custom vue directive that is to be applied on a custom component. I am trying to write some unit tests for it with Jest but I'm having a hard time attaching the directive to the custom ...
1
vote
0
answers
52
views
Did VueJS remove params & paramWatchers in Vue 2?
I accidentally found this documentation of Vue v1, which had a feature to watch attributes on the element that the directive is bound to :
<div v-example v-bind:a="someValue"></div&...
1
vote
0
answers
196
views
Can I override VueJS built-in directive?
I want to add an important modifier to the v-show directive. I copied it's code and added the modifier.
Can I somehow override the built-in v-show directive? I tried:
import { vShow } from "@/...
1
vote
3
answers
375
views
Vue directive don't render element if condition is false
I'm creating my own role/rights system because the ones that are available for Vue don't work.
I now hide the element when a user does not have the appropriate role. But what I actually want is to not ...
0
votes
1
answer
266
views
How to v-bind conditional styles with Vuejs depending on a bootstrap breakpoint?
I'm trying to assign a dynamic style for a different bootstrap breakpoints. To change the position, etc. if the display is different width. So I'm applying v-bind style directive with vue. Am I doing ...
0
votes
1
answer
169
views
VueJS Question about architecture and distribution of files in VueJS project
I am starting to learn VueJS and I realize that the typical .vue files are defined with a three different parts like <template> other part like <script> and other part like <style>.
...
1
vote
1
answer
1k
views
Vue 3 custom directive with modifier type check
How can I create a Vue 3 custom directive and have TypeScript throw a compile-time error if a modifier supplied to this directive is not a known value.
For example:
type ...
0
votes
2
answers
3k
views
V-if and v-for together in vue 3
I have a script which displays the global responses of chatbot in my application. The global response module of application has the option to mark one response as default.
script:
<div class="...
0
votes
1
answer
316
views
Adding condition to directive in Vue3 component
I am building a component which has two icons: like and dislike. When any of the icon is clicked, the icon should get bigger, show color and the upper heading should disappear.
I'm able to implement ...
0
votes
0
answers
201
views
v-cloak works in dev but fails in production
I'm having an issue with the v-cloak directive in Vue.js. I'm using Vue.js 3 + Symfony in API mode and I want to implement a small loader between page loads. However, it works perfectly fine in ...
1
vote
4
answers
734
views
Passing value of style directive to button component in Vuejs
I want to add padding to the :style directive of my shared button component but for some reasons, the changes aren't showing up on the button.
I tried doing it with 3 ways below to apply the changes ...