CODEWITHSUNDEEP
vue.js
Beginner Coder
Beginner Coder

Reputation: 226

Invalid prop: type check failed for prop "value". Expected Boolean, got String with value "0"

I used this package in my Laravel project

    Vue.js toggle/switch button.

In User Component, I used this toggle/switch button for status in user table

  <tr v-for="user in users">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td><toggle-button :value="user.status"
        :labels="{checked: 'On', unchecked: 'Off'}"/>
    </td>
  <tr>

but throw error Expected Boolean, got String with value.i used v-model="user.status" but didn't work.What is wrong in here ?

Upvotes: 2

Views: 7559

Answers (1)

mare96
mare96

Reputation: 3859

The simplest solution is:

<toggle-button :value="!!parseInt(user.status)"
               :labels="{checked: 'On', unchecked: 'Off'}"/>

Your user.status value is string. When the value is '0' it will return false, if the value is something else ('1', '2') will return true.

Upvotes: 2

Related Questions