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
31
votes
4
answers
66k
views
Props gotten directly from vue 3 setup are not reactive
I am writing an application in vuejs and i want to pass prop to a child component but I am getting this error:
Getting a value from the props in root scope of setup() will cause the value to lose ...
18
votes
3
answers
15k
views
How to set types to vue slot props Typescript
I'm trying to set types on my slot props to handle in a table component as you can see in the image
I also have been trying with
#body={item: UserItem}, but it is only rename the parametter.
#body={&...
15
votes
3
answers
26k
views
Readonly target in Vue composition API
My "Generateur" component is sending props to my "Visionneuse" component. Everything works fine inthe browser, but I have this message in the console:
Set operation on key "...
14
votes
3
answers
26k
views
How to have component re-render after its props change in Vue 2?
My component is simple:
<template>
<btn :color="color" @click="toggleColor">{{btnmsg}}</btn>
</template>
<script>
import { Btn } from 'chico'
...
13
votes
2
answers
18k
views
How could I watch a prop in the composition api?
How can I call a function when a prop is updated?
parent container:
<div>
<Maintable :type="typeRef" :country="countryRef" />
</div>
child container:
...
11
votes
1
answer
31k
views
Passing Functions as props in vue js
I'm trying to pass editTodo as props function from parent app.vue to child components ...
TodoItem.vue component there is a list Of Items and Time returns to main user input of newTodo and dateTime ...
11
votes
2
answers
24k
views
Vue 3: How to update component props value correctly using composition api?
I have like this component:
<template>
<div>
<p>Current coords: <strong>{{ coords }}</strong></p>
<button type="button" @click="...
11
votes
1
answer
44k
views
Passing an array to a prop in Vuejs
I pass a list of values from a parent component to its child and want to receive all of the values but I only receive the last one.
This is the code for the parent component:
<app-spider-web
...
11
votes
2
answers
18k
views
Vue <script setup>, unable to use defineProps and defineEmits without importing it
As per the official documentation,
defineProps and defineEmits are compiler macros only
usable inside <script setup>. They do not need to be
imported and are compiled away when <script setup&...
11
votes
1
answer
8k
views
How to pass prop from page to layout
I currently have duplicated layout that the only difference is a prop I pass to a component:
default.vue
<template>
<div class="page">
<SkipToContent />
...
10
votes
3
answers
17k
views
Vue Child Component Doesn't Update on Prop Change
I'm updating an 'exercise' prop that gets sent to a 'workout' component in Vue. In the child component, I'm emitting a function to increment the set you're on. The function is firing in the parent ...
8
votes
1
answer
16k
views
What is a proper way to create a type for Vue props
I'm trying to create a custom type for my prop in Vue js, I've created a types folder and added it in the tsconfig.typeRoots the IntelliSense and all the other things work correctly, no issues at ...
8
votes
1
answer
27k
views
How to call prop function from setup in vue 3
I have the next code:
HTML:
<p @click="changeForm">Iniciar sesion</p>
JS
export default {
name: "Register",
props: {
changeForm: Function,
},
setup() ...
8
votes
3
answers
11k
views
Vue.js 3 declare a props with Array of Class
I try to define my component props where type is Array
But it not working...
import { Person } from '...'
export default defineComponent({
props: {
people: Array<Person>
}
})
...
8
votes
3
answers
12k
views
Vue JS Non prop attributes and Disabling Attribute Inheritance
I have read the docs more than 5 times and I still can't understand what is Disabling Attribute Inheritance is used for and I don't understand the example given.
I understand how props works, it is ...