Changing prop of component in vue.js with composition API

Question

How can I change the prop value of a component and notify these components about the change?

Parent.vue

<script setup>
import Child from './Child.vue'

const finished = ref(false)

function submit() {
    finished.value = true;
}
</script>

<template>
    <Child :open="finished">
    <button @click="submit">Klick</button>
</template>

Child.vue

<template>
    <div v-if="open">Dies ist ein Test.</div>
</template>
  
<script setup>
import { ref } from 'vue'

const props = defineProps(['open'])

const open = ref(props.open)
</script>

When I click on the button, the value changes, but the child component is not notified about it. console.log(open) is still false.

I am using Vue.js version 3 with the composition API.

Runyasak Ch. · Accepted Answer · 2022-08-30 04:39:47Z

2

You don't need to assign with ref, you can use just props.open in Child.vue.

<template>
  <div v-if="props.open">Dies ist ein Test.</div>
</template>
  
<script setup>
import { ref, defineProps } from 'vue'

const props = defineProps(['open'])
</script>

However, if you want to compute this prop, you can use computed as the first answer from Boussadjra Brahim.

edited Aug 30, 2022 at 4:39

answered Aug 30, 2022 at 1:33

Runyasak Ch.

464 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonas Over a year ago

That was easy. Thank you!

Boussadjra Brahim · Accepted Answer · 2022-08-29 16:03:49Z

1

There's some conflict in the Child component, you've a prop named open and a ref property with the same name, which in this case give the priority to the ref one, rename the other property to isOpen and define it as computed :

<template>
    <div v-if="isOpen">Dies ist ein Test.</div>
</template>
  
<script setup>
import { computed } from 'vue'

const props = defineProps(['open'])

const isOpen =  computed(()=>props.open)
</script>

DEMO

answered Aug 29, 2022 at 16:03

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Changing prop of component in vue.js with composition API

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related