I am using vue3 and tried to emit the boolean value from one component to other.

Child component:

<parent
  :footer="false">
 </parent>

Parent component:

<template>
    <div v-if="footer">
        <div>
           This is a footer text
        </div>
   /div>
</template>

<script>
export default {
    props: {
        footer: {
            type: Boolean,
            default: function () {
                return false;
            }
         }
       }
     };
</script>

The values are properly passed to parent component, but those values are string not boolean. I am passing the value as false from child to parent but it always shows the footer text even though I passed the prop "footer" as false.

CodePudding user response：

I'm not sur about what you want but you can check the strict equality with the operator ===.

'true' === true <- result is false
true === true <- result is true

So you can do that:

<template>
    <div v-if="footer === true">
        <div>
           This is a footer text
        </div>
   /div>
</template>

<script>
export default {
    props: {
        footer: {
            type: Boolean,
            default: false,
         }
       }
     };
</script>

Do the same as before in your parent component.

CodePudding user response：

when using boolean in props try this:

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

and if you just want to add footer, <parent footer></parent> will be read as footer = true in parent component