[Vuejs]-Changing prop of component in vue.js with composition API

by

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.

👤Runyasak Ch.

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

👤Boussadjra Brahim

Leave a comment