I've run into a problem here that I feel like I don't really understand. I include a child component that is passed a prop called "active" which can be set to true or false. The idea is that if "true" is passed, then part of the component will be displayed, if "false" is passed, it will not be displayed.

From my understanding, I should be able to just use the prop name, like this:

The problem is that if I directly set the v-if in the above statement to true or false, then it works as expected. If I pass it in as a prop, whether true or false, it always displays.

Valid (display nothing):

Invalid (no matter what the value of active is, the content in the div will be displayed):

//-File1---------------------------------------  //-File2---------------------------------------  

Why is this? I confirmed it by showing the value of "active" and it was passed the value false, but it still renders despite the value being false. Am I missing something here? I've tried with quotes, without quotes, using ref to pass it a local value and using it:

import { ref } from 'vue'; export default{ props:['active'] setup(props,ctx){ const active = ref(props.active); return { active } } }

This didn't work either.

props: { active: { type: Boolean, default: false } }