223 questions
0
votes
1
answer
51
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="'...
- 123
1
vote
2
answers
60
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 ...
- 2,150
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 ".&...
- 896
0
votes
0
answers
198
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 ...
- 3,858
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,404
1
vote
0
answers
192
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 "@/...
- 349
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 ...
- 3,497
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 ...
- 25
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>.
...
- 35
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 ...
- 13
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="...
- 45
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 ...
- 45
0
votes
0
answers
200
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
733
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 ...
- 45
1
vote
1
answer
203
views
Passing style directive value to a component in Vuejs
I am trying to add padding to a shared button component through :style directive.
For some reasons, the changes doesn't show up on the button. This shared component requires different padding based on ...
- 45
0
votes
3
answers
1k
views
Binding 'color' attribute of div element to 'color' data property in Vue.js
I am trying to understand how Vue.js' directives work and how they can be used to manipulate the DOM. I have been experimenting with a simple example that should bind the "color" attribute ...
- 187
0
votes
2
answers
1k
views
[Vue warn]: Unknown custom element: <cc-text-area> - did you register the component correctly?
I am making a component InputText.vue as follows:
<template>
<div class="row">
<div class="col-sm-12">
<div class="form-group&...
0
votes
1
answer
7k
views
Converting HTML, CSS, and JavaScript files to a vue component
I am having a problem converting my files to a vue component. I want my website to function the same way but using vite on a vue 3 project (with axios). I think I should add vue directives like v-if ...
- 1
1
vote
1
answer
534
views
how to use dropdown box to filter the display/hide div element in vue js
I am new to VueJS and trying to create a simple dropdown box to filter the display/hide of div but encounter some problems.
<template>
<select
class="form-select"
aria-...
- 35
1
vote
2
answers
2k
views
Directives for Detecting Clicks outside Element
Based on this Article https://medium.com/@Taha_Shashtari/an-easy-way-to-detect-clicks-outside-an-element-in-vue-1b51d43ff634
i implemented the same methodology of the directive for detecting outside ...
1
vote
1
answer
1k
views
Vuejs Boolean Attributes (Truthy and Falsy values)
I'm reading the Vuejs docs and get confused at some point when I was at the part of Attribute Bindings (link to the specific part : https://vuejs.org/guide/essentials/template-syntax.html#boolean-...
- 113
2
votes
1
answer
5k
views
How can I use vnode or binding directive to call a component method in VUE 3?
I created a directive, and I need to make that directive call a function that exists inside the component that has the directive.
// Component with directive, this component has the method '...
- 1,534
0
votes
1
answer
614
views
Vuejs3.0 how to make directive to detect if user clicked outside of the component?
I have question how to rewrite vue2.0 custom directive to work with vuejs3.0?
The directive purpose is detect if user clicked or not outside of the component.
Okey. here is code what worked on vuejs2....
- 53
0
votes
1
answer
1k
views
How to hide the navbar on scroll in Vue 3 using the composition API?
I'm trying to use the composition API to create a function that can hide the navbar when scrolling up and show it when scrolling down. I already have this function in vanilla JS, but in Vue3 I'm ...
1
vote
3
answers
483
views
Custom directive to replace @mouseenter + @mouseleave event?
I'm having lots of elements on which @mouseenter set a value to true and @mouseleave sets it to false. Basically what I need is a way to set a reactive variable to true if the mouse hovers the element....
- 6,173
0
votes
1
answer
2k
views
Vue.js - Pass data from child component to parent using emit but without button
I have a parent form template and each question of the form is inside a child component, like this
<template>
<question1
@display-answer-1="setAnswer1"
/>
...
- 31
3
votes
1
answer
1k
views
Render directive conditionally
I've been struggling all day to find a way to conditionally render a directive on an element.
I ended up on this page: https://vuejs.org/guide/extras/render-function.html but then I wasn't able to ...
- 380
1
vote
1
answer
860
views
Vue.js3 Toggle v-show on checkbox/toggle click, how to make v-show reactive on each click
<template>
<ToggleSwitch class="right " @onChange.preventDefault="onChange" ></ToggleSwitch>
<div v-show="!hidden">
...
- 89
0
votes
0
answers
2k
views
Writing a custom directive on Vuejs 3, composition API in order to detect outside click
my first time trying directive with vue js3.
My goal: To detect a click outside the component with the directive and Vuejs 3, composition API.
My expected result: To change a Boolean value in each ...
- 1
0
votes
2
answers
964
views
Vue.js Directive inserted/bind overwrites eventListener click event
Say I have multiple dropdowns or elements on the page that all use this directive I've used called closable. This calls an expression passed in if the element clicked is outside of the element using ...
0
votes
0
answers
932
views
Vue custom directive should replace the element with a comment but child component mounted method gets called first
We developed a Vue custom directive that replaces DOM elements with a comment depending if the user has permission for specific information. This directive works fine when we use it in any DOM element,...
- 1,071
0
votes
0
answers
119
views
Conditional class not triggered by reactive shared store
I have this nav menu which colors a menu item, when clicked:
At first I handled it with state.active by applying a conditional class directive like so:
component.vue:
<template>
<div id=&...
- 6,173
7
votes
3
answers
9k
views
Typing Custom Directives
I would like to ask a question about Vue's custom directives. As a fan of Typescript, I want to use this feature with type support, yet I could not find any solutions neither on the web nor on the ...
- 456
-1
votes
2
answers
1k
views
Property 'myfunc' was accessed during render but is not defined on instance
I don't know why but this error Property 'myfunc' was accessed during render but is not defined on instance is keeps on showing.
I am sharing my Html and js code.
const ListRenderingApp = {
data() {
...
0
votes
1
answer
2k
views
Html attribute camel-case with vue directive
I am working on a MVC project with Vue.js(Vue3) front-end.
For some reason when I am trying to use any directive that contains camel-case arguments, like in the example below, they are automatically ...
- 21
3
votes
1
answer
2k
views
Vue 3 directive handler not working as basic directives
I've created a directive but I can't get it to work with a "executed" handler:
Here is how the directive is created:
vueApp.directive('click-outside', {
beforeMount(el, binding, ...
- 3,650
1
vote
0
answers
843
views
Failed to resolve directive. Unhandled error during execution of scheduler flush
I'm trying to turn some code into a reusable directive, but I'm getting errors when I load the page that contains it.
This is the file with the directive:
// I also tried "import type"
...
- 2,732
0
votes
0
answers
3k
views
How do I define a custom directive using composition API in Vue3?
The documentation is quite clear on how to create a custom directive using app.directive() the "old way", but that does not take into account the composition API way of doing things.
What I ...
- 2,732
2
votes
1
answer
484
views
I can not detect api data in innerHTML after call the API
I am facing a problem catching innerHTML after calling the API using Axios in Vue js.
here is my HTML code
<div id="vue-app">
<div id="sourceText" style="display: ...
0
votes
2
answers
5k
views
Vue mutate prop binded by v-bind with sync modifier
I have an object in my component data. Now, I'm just binding all the properties of the object as a prop to the child component using v-bind.sync directive. I'm updating these props from the child ...
- 9,089
0
votes
1
answer
618
views
Append an option and make it as a selected value in the select2 directive in vue 2
I've created a select2 directive in vue 2 like this:
// Select2 directive file
import Vue from "vue";
function updateFunction (el, binding) {
setTimeout(() => {
Vue.nextTick(...
- 587
2
votes
2
answers
2k
views
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 ...
- 77
1
vote
2
answers
1k
views
How to pass an object to a web component generated width Vue?
My component has to render an object to fill the content. When I am working in the Vue project, I have not problem to pass this object with
<my-compnent :card="card"></my-component&...
1
vote
2
answers
917
views
Has anyone came across this problem? [vue/no-multiple-template-root] The template root disallows 'v-for' directives.eslint-plugin-vue
It is actually a three problems in one:
[vue/no-multiple-template-root]
The template root disallows 'v-for' directives.eslint-plugin-vue
[vue/no-parsing-error]
Parsing error: Expected to be an alias, ...
user16575684
1
vote
2
answers
531
views
Some areas inside the Vuetify Dialog box don't close it even if there is no content there
See this image here of my custom Lightbox component.
One should be able to simply exit the component and go back to the page by clicking on anywhere outside the image or the v-sheet component on the ...
- 759
-1
votes
1
answer
183
views
Cannot get click in Vue.js to work the way I'd like
everyone, I am new to vuejs and vuetify and trying to make a book app but the problem is all the code is complete but when I click on the dropdown item it shows all the books item but I want to show ...
0
votes
1
answer
340
views
How to expand the video container smoothly as it comes to viewport in Nuxtjs
I have to make a webpage very similar to this one. I'm using Nuxt for this, I'm facing issues in making the video expand & shrink in the exact same way.
I've tried to replicate the issue on ...
- 5,586
0
votes
2
answers
2k
views
Passing data from custom directive to component
I have a directive that obtains a URL from an element binding, and then performs an axios GET request using that URL.
I loop over the returned data, and I would then like to be able to store the data ...
- 956
1
vote
2
answers
470
views
How can I move directives from main.js into an external file Vue 3
I would like to have a clean main.js and for this I want to move the directives into an external file. That is, to do something like
//main.js
import directives from "./extensions-vue/directives&...
- 514