I'm encountering an issue that I need some help with. In my setup, I have a child component that passes an "active" prop which can be set to either true or false. The intention is for a certain part of the component to show if it's passed as true, and not to show if it's passed as false.
Based on my understanding, I should simply be able to use the prop name like this:
<template>
<div v-if="active">This is the value of active: {{ active }}</div>
</template>
The problem arises when I directly set v-if to true or false in the above statement - it works as expected. However, when I pass it in as a prop, it always shows regardless of whether it's true or false.
Works (nothing shown):
<template>
<div v-if="false">This is the value of active: {{ active }}</div>
</template>
Doesn't Work (contents in the div are displayed regardless of the value of active):
//-File1---------------------------------------
<template>
<myComponent active=false />
</template>
//-File2---------------------------------------
<template>
<div v-if="active">This is the value of active: {{ active }}</div>
</template>
<script>
export default {
props:['active']
}
</script>
I've double-checked the value being passed in as "active" and confirmed that it's indeed false. However, it still renders despite the value being false. Am I overlooking something here? I've experimented with different ways of passing the prop, but nothing seems to work:
import { ref } from 'vue';
export default {
props:['active'],
setup(props, ctx) {
const active = ref(props.active);
return {
active
}
}
}
Even this approach did not yield any results. Any insights on why this might be happening would be greatly appreciated.