Questions tagged [vue-component]
Component is a powerful Vue feature that allows extending basic HTML elements to encapsulate reusable code.
vue-component
10,684
questions
0
votes
2
answers
18
views
Re-render a OpenWeatherMap component when switching language in Vue 3
I am a beginner using Vue 3, to learn it I am developing a simple weather webapp using OpenWeatherMap API. I have added multilanguage support using vue-i18n library and everything works fine. But ...
- 549
1
vote
1
answer
56
views
two-way binding of a checkbox does not happen
For the code posted below vue component it is a child component and is hosted in a specific parent. When I make two ways binding via vModelCheckGeoTIFFOverlayBandAverages by introducing a change to ...
- 27
0
votes
1
answer
52
views
vue 3 composition api, can not return value from a helper function to component
i think this is a problem of scope inside my helper function, i have successfully implementing the same logic in my component and it works perfectly
i have already using a composable function to use ...
0
votes
0
answers
40
views
Vue child component not mounting during rendering
const componentData = {
"label": "body",
"category": "default",
"children": [{
"label": "Droppable Component&...
1
vote
1
answer
42
views
how to change v-calendar default color using vue.js 3
<template>
<v-row>
<v-col>
<v-sheet>
<v-calendar class="custom"></v-calendar>
</v-sheet>
</v-col>
</v-row&...
1
vote
0
answers
75
views
VUE [Vue warn]: Wrong type passed as event handler to onClass - did you forget @ or : in front of your prop?
At some point I noticed that a lot of warnings appear in the project, maybe because I reinstalled node_module or something else.
The problem is that when adding attributes to a custom component errors ...
- 11
0
votes
0
answers
20
views
Vue2.x vue custom element when i passed param like 111. the dot at the end was removed. Is it well known issue? How to fix it
Vue2.x vue custom element when i passed param like 111. the dot at the end was removed. Is it well known issue? How to fix it.
Step
npm run build vue file
use file from /dist in php project
Problem ...
0
votes
1
answer
38
views
Binding multiple properties to a component using and object as props - Vue 3
I'm having a little problem binding multiple properties to a component using an object. When I use this component on any other page I expect to pass the props in matching the ContentOptions interface ...
- 65
0
votes
1
answer
44
views
Question about vue 3 lifecycle and availability of properties
I want to load some content of a vue component based on a given argument. Here is some code to illustrate:
ParentComponent.vue
<Suspense>
<div class="row g-0">
<div class=&...
- 2,596
1
vote
1
answer
26
views
How to just add the content of a component to Vue DOM and not the wrapper itself, like React.Fragment in React JS
I'm trying to refactor my code into readable and short pieces. Therefore sometimes I need to create a dumb component which only is holding the repetitive part of my code. For example I wanted to use ...
- 11
0
votes
2
answers
34
views
shorter names for vue3 deep objects when accessing them in template and in code
How to get around long names of objects, for example, buttons.btnCancel.inactive? I've tried plain desctructuring using const {btnCancelInactive: inactive, btnCancelInactiveClass: inactiveClass, ...
- 555
-1
votes
0
answers
32
views
How to use one component to render different data on Vuejs?
I want to create a page where information about games on my site will be posted using a component that will be rendered depending on which card I click on (depending on the name of the game). I don’t ...
- 1
1
vote
1
answer
57
views
How to teleport only after the container is mounted in Vue 3?
Depending on the loading state, sometimes the <Teleport />'s target container will be mounted later than the content's mounting, causing Vue error
[Vue warn]: Invalid Teleport target on mount: ...
- 1,608
0
votes
1
answer
29
views
show '+N More' in vue-search-select
I have a Vue component and I am using MultiListSelect (vue-search-select). My problem is, that if I select multiple options, I need to show +N More inside the box.
<MultiListSelect
:list=&...
1
vote
1
answer
27
views
Integrate vee-validate with vue-datepicker
I'm trying to validate vue-datepicker for required field using vee-validate like this:
<Form @submit="handleEvent" :validation-schema="addEventSchema">
<...
- 618
0
votes
0
answers
28
views
Vue access components
I want to trigger the update() function of kursAktiv.vue when I press the button "Kursanlegen" in kursAnlegen.vue ! Here are the kursAnlegen button and function:
<kursverwalter v-model:...
0
votes
0
answers
22
views
Can't see any change after updateing Vue component inside Laravel Nova project
I am having issue I wasn't able to fix with googleing or stackoverflowing and its super strange one. It could easily be lack of knowledge on my side so have mercy.
I have made an application recently ...
- 132
0
votes
0
answers
33
views
Facing issues in nested routes in Vue-3
I am creating a simple CRUD application for users based on different roles, but I'm facing issues with nested routes and component rendering. I have carefully reviewed their official documentation, ...
0
votes
1
answer
41
views
Using a custom modal in vue, 2 times inside another component renders only the first component data
So the problem is that I am working in a Laravel Vue application both are different application. The problem I am facing is that I have a created a component for modal using bootstrap in VUE JS.
And I ...
- 28
0
votes
0
answers
30
views
display routes in tabs with vue
can you help me to create something similar to
https://adminlte.io/themes/v3/iframe.html#
I have tried this
<template>
<div class="tabs" v-if="tabs">
<nav ...
0
votes
0
answers
24
views
Avoiding style-mismatch with computed value
My goal is to render a list of elements randomly placed inside a grid.
I tried to achieve this with the cue-computed property. But unfortunately I'm always getting the error:
- rendered on server: ...
- 17
1
vote
1
answer
43
views
Vue 3 sub component raises click event when displayed
In vue 3 compose api, I am displaying a popup component and I want to capture out click for closing the modal.
my code in my parent component
<template>
<button @click="toggleSettings&...
- 5,427
0
votes
1
answer
39
views
Populated options on select apear black at first but after changing tabs it shows okay
I have a select component like this
<template>
<div class="newsletter-launcher">
<h2>Select a Newsletter to Launch</h2>
<select v-model="...
- 131
0
votes
0
answers
27
views
Cypress Testing Error: getResult() Method Returns undefined for Canvas Element in vue-advanced-cropper
I am writing a test for the image cropping functionality in my Vue application using the vue-advanced-cropper package. I have encountered an issue where the getResult() method, which retrieves the ...
- 1
0
votes
0
answers
54
views
get() of a computed property never gets invoked
i am using vue3 with options api
as shown in the below posted code, i have two radio buttons, the first one will invoke onShowGeoTIFFOverlayChanged and the second one will invoke ...
- 33
0
votes
0
answers
58
views
Vue 3 onMounted not loading data in Vuetify data table server
I have created this page with Vue 3 + Vuetify called demo.vue in my project which receives data from an API server.
The problem that I'm facing is that I set up the data inside an onMounted function, ...
- 1
0
votes
1
answer
50
views
Getting import error using vue3 component library created using vite
The .js library file have following import statement:
import JU, { defineComponent as Ge } from "vue";
Due to this I am getting below error:
SyntaxError: The requested module '/node_modules/...
- 89
0
votes
0
answers
25
views
Vue keeps p5 components alive after navigating
I have build a creativ coding website using vue and p5. In my app i display different p5 components depending on the current route. The problem is that somehow vue or p5 (idk which) keeps the ...
- 30
0
votes
1
answer
46
views
In Vue.JS, How to pass and change props value into nested components?
My requirement is very basic and easy, but not sure why even ChatGPT keeps giving me answer that has warning messages.
I am using Vue 2.
I have three nested components: GrandParentComponent, ...
- 1,886
0
votes
1
answer
46
views
How to create helper methods to render components in nuxt
I'm new to Nuxt, I'm using Nuxt and Nuxt UI for my project. I'm trying to create helper methods to render the components with small differences. For example, in my Header.vue
<template>
<...
- 140
0
votes
1
answer
57
views
How to call the methods exposed by components in slots with Vue 3 Composition API
There are some components (child component) in a slot (in parent component) and I want to call the methods on them. I tried the following steps:
Retrieve the child components as objects with useSlots
...
- 35
0
votes
0
answers
61
views
emit does not dispatch vlaue from child to parent component
vue3 with options api
as shown in the below posted code, the child component has a drop-down list as shown in the code in section child. This child component is hosted in parent-1 and parent-2, and ...
- 33
0
votes
0
answers
41
views
how to introduce v-model to a drop-down list
vue3 with options api
as shown in the code section below, i am creating a vue-component with drop-down list
what i want to achieve is, to introduce v-model to the drop-down list so that when the user ...
- 33
0
votes
0
answers
37
views
Store gets called even if set to the same value more than once
i am using vue3 with options api
for the storeTest.vue posted below, every time i set a value to it, the respective wachter gets executed, but it also gets excuted even if the i set the same object ...
- 33
0
votes
1
answer
71
views
Watcher does not detect changes occured to an array of objects
I am using vue3 with options api as shown in the section titled code. I set an object to a store. storeTest.vue shows how the Store is implemented, and in watch it shows how I listen to changes that ...
- 33
0
votes
0
answers
39
views
ERROR in [eslint] Cannot read properties of null (reading 'references') Occurred while linting
I am new to work with vue. I have used @vue-flow/core to use a custom edge with button component. But while running the npm run build/serve, I am getting this error:
ERROR in [eslint] Cannot read ...
0
votes
0
answers
20
views
Vuetify 2 date picker won't update date in DOM
I'm trying to make a date picker and update some text in the DOM when a new date is selected, but it won't update at all.
My template
<template>
<div>
{{ new Date(date)....
- 11
0
votes
0
answers
57
views
how to push value into a ref array
as shown below in the code, in the constructor i create a ref array. i want to push this.#recentlyHoveredGeomProps.value into the reactive array object which is this.#recentlyHoveredGeometriesProps.
...
- 33
0
votes
0
answers
33
views
Vue.js Dynamic Slots Not Rendering Content as Expected
I'm working on integrating Vue.js with Laravel to create a multilingual content management system, and I'm facing an issue with dynamic slots not rendering any content. Despite setting up everything ...
- 370
0
votes
0
answers
18
views
JointJS Vue.js Integration: Double-Click Event Listener Multiplication
I'm encountering an issue with event listeners in JointJS within a Vue.js application.
The problem arises when using a double-click event listener (cell:pointerdblclick) within a method called ...
0
votes
0
answers
32
views
VueJS User cant alter checkbox state
I have the following script which use to work perfectly fine.
<div id="inspectionList" class="row m-0 p-0" v-if="app.getOption('InspectionChecklists')">
<div v-...
- 124
0
votes
0
answers
44
views
Vue Component - dynamically create styles for deeply injected HTML content
We have content that a user creates using a text editor, which creates HTML tags for them such as h1 p etc etc.
We also let the user define a theme via a predefined form that basically sets style ...
- 2,784
1
vote
1
answer
59
views
Vuetify v-sparkline component not rendering
I was wondering If I could get some help with sparkline graphs in my component, as I'm still very much new to this.
For now, I just want to display a graph with default settings and an array of ...
- 11
0
votes
1
answer
26
views
two radio buttons, how the selection of one of them deselect the other one
in the code mentioned in vue-component section below, i create a component with two radio buttons.
what i want to achieve is, when the radio button in idRadioBtnShowGeoTIFFOverlayContainer is selected,...
- 33
1
vote
2
answers
102
views
Array of string inputs in Vue 3?
I'm trying to present a form using Vue 3 that will contain a list of text input fields. The fields map to a string[] with a fixed length. I'd like to be able to set each field's v-model to the ...
- 11.7k
0
votes
1
answer
50
views
Nuxt Vue display component based on parameter/type
I am fairly new to Nuxt and Vuejs. I have googled for a solution but haven't found any.
I have a page with component <VTextField></VTextField> and <VSwitch></VSwitch>, sample ...
- 47
0
votes
1
answer
40
views
Is there a way to v-bind Components (while setting its prop) as prop of another component as shown below
<MyParentComponent :component-prop="MyChildComponent.ChildComponentProp.value = 'xyz'">
This is what I want to achieve. I want to provide MyParentComponent a child component as a prop.
...
- 1
2
votes
1
answer
132
views
Event error: TypeError: Cannot read properties of undefined (reading 'stopPropagation')
I can't use click modifiers when passing up the click event from a child component to the parent component. Does anyone know what I may be doing wrong here?
I have a component like this:
<!-- ...
- 911
0
votes
2
answers
194
views
Trying to use Node-Red Dashboard 2.0 ui-template with Vue v-date-picker
Using ui-template from Dashboard 2.0 I use the code and node-red flow below to try and get the date selected to be sent in a node-red message, but can not get the debug node to display anything. Have ...
- 41