Passing boolean Vue prop value in HTML

Question

I am fairly new to Vue and have started with a project with vue-cli.

I am looking into conditional rendering based on a prop sent from parent.

Home.vue (parent)

<template>     <Header have-banner="true" page-title="Home">      </Header> </template>  <script>     import Header from "./Header";      export default {         components: {             Header,         },         name: "Home",         data() {             return {                 header: "Hello Vue!",             };         },     }; </script> 

Header.vue (child)

<template>     <header>         <div v-if="haveBanner == 'true'">             ...         </div>             ...     </header> </template> 

I have looked at another conventional way to achieve this but vue-cli renders templates differently.

As passing the prop in the HTML markup, the prop haveBanner evaluates as a string and, therefore, even if I did:

Parent

<Header have-banner="false"></Header> 

Child

<div v-if="haveBanner"`>     ... </div> 

That <div> would still display and, because of this, I am having to do an explicit check to see if it evaluates to 'true'. I am not a fan of this due to possible issues with type coercion and I am thrown a warning with a type check (===) saying:

Binary operation argument type string is not compatible with type string

Is there a way to for either the child to evaluate this prop as a boolean or for the parent to pass it as a boolean in the markup?

Answer 1

If passing in JS keywords such as boolean values or references to variables, you will need to use v-bind (or :), i.e.:

<Header v-bind:have-banner="true" page-title="Home"> 

This will have the effect of binding the boolean true to the prop, not a "true" string. If you are not using v-bind, the haveBanner prop will always be truthy because it is a string of non-zero length, no matter if you assign "true" or "false" to it.

Friendly hint: HTML tags are not case-sensitive, so you might want to use custom-header or my-header-component instead of Header:

<custom-header v-bind:have-banner="true" page-title="Home"> 

See proof-of-concept:

Vue.component('custom-header', {   template: '#customHeader',   props: {     haveBanner: Boolean,     pageTitle: String   } });  new Vue({   el: '#app' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>  <div id="app">   <custom-header v-bind:have-banner="true" page-title="Home"></custom-header>   <custom-header v-bind:have-banner="false" page-title="Home"></custom-header> </div>   <script type="text/x-template" id="customHeader">     <header>         <div v-if="haveBanner">           <code>haveBanner</code> is true!         </div>         <div v-else>           <code>haveBanner</code> is false!         </div>     </header> </script>

Pro tip: Use : shorthands to make your template more readable, i.e.:

<custom-header :have-banner="true" page-title="Home">