How to pass Boolean props to another component in vuejs

Question

I have two components: component A and Component B. In the component A, I have a props called hasBorder with Boolean type and when i call component A in the component B, I passed value to a props component of component A, I have an error.

html component A:

<div> <img src="path" :style="hasBorder ? 'border:5px;': ''"/></div>

js component A:

Vue.component('compA', {
    props: {
       hasBorder:{
         type:Boolean,
         default:false
       }
    }
});

html component B:

<div> My image : <compA has-border="myStyle"></compA></div>

js component B:

Vue.component('compB', {
    data: {
       return {
           myStyle : { type:Boolean, default :true}
        } 
    }
});

I have this error "Invalid prop:type check failed for prop hasBorder. Expected Boolean, got String with value "myStyle".

How can i fix this error please

Nikola Pavicevic · Accepted Answer · 2022-05-26 15:01:43Z

2

You need to bind your props with v-bind: or : in order to pass data. Data property needs to be a function that returns object. Please take a look at snippet:

const app = Vue.createApp({
  data() {
    return {
      myStyle: true,
      myPath: 'https://picsum.photos/100'
    };
  },
})
app.component('compA', {
  template: `
    <div><img :src="path" :style="hasBorder ? 'border: 5px solid turquoise;': ''"/></div>
  `,
  props: {
    hasBorder:{
      type:Boolean,
      default:false
    },
    path: {
      type: String,
      default: ''
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div> My image : <comp-a :has-border="myStyle" :path="myPath"></comp-a></div>
</div>

answered May 26, 2022 at 15:01

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vugar Taghiyev · Accepted Answer · 2022-05-26 14:21:38Z

1

You expect bool value but you are trying to send an object.

Try this

Vue.component('compB', {
    data: {
       return {
           myStyle : true
        } 
    }
});

And use v-bind

<div> My image : <compA v-bind:has-border="myStyle"></compA></div>

answered May 26, 2022 at 14:21

Vugar Taghiyev

4334 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to pass Boolean props to another component in vuejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related