Questions tagged [vue-props]
For questions specific to the usage of the "props" property within the Vue.js framework. When using this tag also include the more generic [vue.js] tag.
vue-props
480
questions
0
votes
2
answers
35
views
Vuejs 3 props are all undefined
I know this has been asked before but nothing I've tried works, even the official docs
I have a view sample vue component and I want to pass a prop so I can display it
<template>
<div ...
- 3,061
0
votes
1
answer
25
views
VueJS 3 : reference value not updating on click
In VueJS 3, I have a parent Component Index:
<CreateReportButton>
<slot>
<PrimaryButton as="icon" size="xs" color="white" @...
0
votes
1
answer
50
views
Vue3: Computed value (array) not sorting when based on Props
I am using a computed value that returns an array. This computed value is being used in a Vue component.
<component v-for="(item, index) in sortedItems" ...more props />
The prop that ...
- 72
0
votes
1
answer
45
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 ...
- 75
0
votes
1
answer
48
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
0
answers
61
views
Vue 3: withDefaults() prevent TypeScript from checking conditional props
I've tried to create conditional props for my <Button /> component using discriminated union types. I don't want to allow pass down props like to, hash, linkBehavior when another prop called ...
0
votes
3
answers
215
views
How to pass component as props in vue 3 composition api?
i want to pass props customActionComponent as component and need to render in child component
FlightDetail.vue
<template>
<ComponentCard
title="Flight Details"
subtitle=&...
0
votes
1
answer
61
views
Passing static data from parent to child Vue component
I'm studying Vue.js online through YouTube videos and I learned that to pass data from a parent to a child component we use v-bind in the parent and props in the child, yet after I created my first ...
- 1
0
votes
1
answer
102
views
Vue 3: Passing Data via Props and Vue Router Results in Invalid Params Warning
I'm working with Vue 3 and trying to pass data between views using Vue Router. My goal is to pass data from JobSelection.vue to Invoice.vue through router parameters
In index.js I defined the props as ...
- 92
0
votes
0
answers
29
views
Passing an object to modal VUE
I'm having trouble with passing information to my modal.
I would like to pass a complete object to the modal.
I have a view (shortened for this purpose):
<script>
const openModal = (x, action) =&...
- 133
0
votes
0
answers
41
views
Vue JS - How to send props and emit correctly to dialog component for edit the data
I have a parent component 'DaftarKajian' and child component 'DaftarKajianMobile' and another child component named 'EditJadwalDialog'. What I have to tried is props the fetched data from '...
1
vote
3
answers
253
views
Pass dynamic object data via nuxt-link to component
I have a project which is build in Nuxt 3 with a homepage which shows products. On that homepage, you can click on the title of the product and the product details page opens up. I archive this by ...
- 645
0
votes
1
answer
126
views
Vuejs child component props does not update when parent component update props value
I have a parent and child component setup, whenever i pass an object property to my child component, it only picks up the initial value and does not further update when changes are made from the ...
- 3
0
votes
1
answer
43
views
In Vue3's compositional API, how can I v-bind a dynamic group of props to a child component and not lose reactivity?
The context is that I have a Button component and a SquareButton component that wraps it as a higher order component. The SquareButton takes the same props as Button, but includes an extra prop needed ...
- 3,789
1
vote
0
answers
21
views
Passing object with reactive properties as a prop triggers child component onUpdated hook when updating parent component state
Consider a simple component Comp.vue file that only logs a message in the console when updated:
// Comp.vue
<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
console....
- 11
0
votes
0
answers
31
views
Vuejs basic structure type of props does not pass the Object
Any idea why below worklist to object page navigation does not pass the props? In debug, I can see the row passed to rowData in WorklistPage. But it arrives to the ObjectPage as an empty Object.
<!-...
- 1,397
0
votes
1
answer
98
views
Is it possible to pass a background image as prop from the Tailwind CSS config?
This is the parent component Camp.vue
<template>
<section class="border-2 border-green-400 2xl:mx-auto max-w-[1440px] relative flex flex-col py-10 lg:mb-10 lg:py-20 xl:mb-20">...
0
votes
1
answer
48
views
Vue.js 3 SFC multiple lists
I am creating a vue.js3 SFC application where the list component is used multiple times. The aim is to produse a separate lists of items in each component from SingleList.vue. I wanted to use a v-for='...
- 15
0
votes
0
answers
143
views
How to properly wait for props in child component from parent
I have created a child component which iterates to a variable that was sent from the parent component. The parent components sends an axios request to the backend and then sends it down to the child ...
0
votes
1
answer
51
views
How to Pass value to Non Nested components in Vue 3 composition Api
I have a MainLayout , SideBar Component and a TopBar Component.
I placed a SideBarButton Component on the the TopBar Component, which when clicked should toggle the sidebar.
How do i pass the ref ...
0
votes
0
answers
140
views
Prop with default value gets undefined type in Vue 2
I have a child component with code:
export default {
props: {
search: {
type: String,
default: () => null,
},
}
}
And a parent component with code:
<template>
<ChildComponent ...
0
votes
1
answer
57
views
Vue.js 3 SFC Prop
When I use a prop in SFC the prop shows empty, or as you prefer it does not show.
I have an ActionButton.vue file:
<script setup>
defineProps({
actionButtonOne: {
type: String
}
}...
- 15
0
votes
1
answer
83
views
Pass prop to persistent layout
I have search functionality in my header and i want to pass prop products to the header in the persistent layout in order to show these products in the search and filter them accordingly, how can i ...
0
votes
1
answer
163
views
Provide and inject multiple properties and multiple functions that mutates multiple properties
According to the Vue documentation on provide and inject APIs https://vuejs.org/guide/components/provide-inject.html, you provide a state and function to update state like this:
<!-- inside ...
0
votes
1
answer
68
views
Vue - parent component needs to check the value of a prop in the child component before doing something (Conditional assignment)
i have this component, if nav is entered or leaved, i want to reassign isNavClosed to the opposite of its value so nav and main content get decreased and increased accordingly, but i only want to do ...
0
votes
2
answers
110
views
Toggle Button With Props & emit
this is my first time using props and I can't figure out what's the problem
I want to make a component of the toggle button and then use it anywhere with an entry data,
but it doesn't work as I expect
...
- 3
0
votes
1
answer
40
views
Why the watcher can not detect the change?
In the code below there are App.vue, appSidebar.vue and invoiceContent.vue files, the watcher does not detect the change of clearForm prop in the invoiceContent.vue and console.log("clearForm :&...
- 13
0
votes
1
answer
690
views
Inertia Vue 3 - Vue component not receiving props
i want to pass users from Inertia render to vue component:
routes/web.php
Route::get('/', function () {
return Inertia::render('Dashboard',['users'=> DB::table('users')->get()]);
})->...
-1
votes
1
answer
62
views
VueJS - Props Validation passed by type vs value
defineProps({
firstName: {
type: String,
required: true
},
});
const props = defineProps({
firstName: String
})
I just want to ask simple question, in the first code it passes an ...
0
votes
0
answers
24
views
Vue can't read prop in script, but renders fine in template
So i am trying to use prop's object 'meal' to check if it's in my array in LocalStorage but i get an error "meal is not defined". It's getting even more weird beacuse template is using it ...
- 1