VueJs: Invalid prop:Expected Boolean, got Undefined

Question

When using a component i got two errors

1-

[Vue warn]: Property or method "premium" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

2-

[Vue warn]: Invalid prop: type check failed for prop "premium". Expected Boolean, got Undefined

Here is my Code:

HTML:

<!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>eCommerce</title>
    </head>

    <body>

      <div id="app">
        <product :premium='premium'></product>
      </div>




      <script src="public/plugins/bootstrap-4.3.1/js/bootstrap.min.js">
      <script src="public/js/vue.js"></script>
      <script src="public/js/app.js"></script>
    </body>

</html>

app.js

Vue.component('product', {
      props: {
        premium: {
          type: Boolean,
          required: true
        }
      },
      template: `
        <div class="container">
           <p>{{ premium }}</p>
        </div>
    `,
      data() {
        return {
          cart: 0,
          color: "white"
        }
      },
      methods: {
        addToCart() {
          return this.cart++
        },

      }

    }) //component

    var app = new Vue({
      el: '#app',

});

I don't see 'premium' prop in new Vue declaration in a data section that's why VueJS got you these errors. — Anatoly, Apr 12 '20 at 20:52

score 2 · Answer 1 · edited Jul 15 '22 at 22:55

Issues here are two:

required property is referenced but not defined
invalid property type

define the required prop

You need to define an initial value, since property is required. This is best done using a default:

Vue.component('product', { 
  props: {
     premium: {
        type: Boolean,
        required: true,
        default: false
     }
  },

See also [Vue warn]: Property or method is not defined on the instance but referenced during render

bind a value with valid type

You are [dynamically binding][1] (denoted by colon : as shortened v-bind prefix) a JavaScript expression premium to the boolean property.

Assuming there is no variable of this name premium defined, it will evaluate to JavaScript value Undefined instead of required valid boolean values false or true. Thus the warnings.

Try binding it to a constant with either dynamic binding or simple static binding like:

<product premium="true"></product>

See also Vuejs error, Invalid prop: type check failed for prop. Expected Date, got Number with value

VueJs: Invalid prop:Expected Boolean, got Undefined

2 Answers2

define the required prop

bind a value with valid type

further reading on props