CODEWITHSUNDEEP
vue.js
dmikester1
dmikester1

Reputation: 1362

[Vue warn]: Missing required prop: "productInfo"

I'm fairly new to Vue so this may be obvious, but I must be missing something. I keep getting the error: [Vue warn]: Missing required prop: "productInfo" in my .vue file. It says its found in ProductSlider.vue.

ProductSlider.vue

    <template>
  <div
    id="recommendedProducts">
    <h2>{{ params.headerText }}</h2>
    <div
      class="wrapper">
      <div class="carousel-view">
        <carousel
          :navigation-enabled="true"
          :min-swipe-distance="1"
          :per-page="5"
          navigation-next-label="<i class='fas fa-3x fa-angle-right'></i>"
          navigation-prev-label="<i class='fas fa-3x fa-angle-left'></i>">
          <slide
            v-for="product in products"
            :key="product.id">
            <Product
              :id="product.id"
              :product-info="product"/>
          </slide>
        </carousel>
      </div>
    </div>
  </div>
</template>

<script>
  import Slider from './Slider'
  import Product from './Product'
  import {mapState, mapGetters} from 'vuex'
  import axios from 'axios';

  export default {
    name: "Slider",
    components: {
      Product
    },
    props: {
      productInfo: {
        type: Object,
        required: true
      }

    },

I chopped off the end of the ProductSlider code because the rest is very long and irrelevant.

And then here is my Product.vue:

<template>
  <Product>
    <div class="img-container text-center">
      <a
        :href="productInfo.href"
        class="handCursor"
        tabindex="0">
        <img
          v-if="productInfo.imgOverlay"
          :src="productInfo.imgOverlayPath"
          :alt="productInfo.title"
          :aria-label="productInfo.title"
          border="0"
          tabindex="-1">
        <img
          :src="productInfo.imgURL"
          :alt="productInfo.title">
      </a>
    </div>
    <h4 class="itemTitle">{{ productInfo.title }}</h4>
    <div class="price-div">
      <div class="allPriceDescriptionPage">{{ productInfo.price }}</div>
    </div>
    <a
      href="#"
      tabindex="0"
      name="instantadd">
      <div class="btn_CA_Search buttonSearch gradient"> Add to Cart</div>
    </a>
  </Product>
</template>

<script>
  export default {
    name: "Product",
    props: {
      productInfo: {
        type: Object,
        required: true,
      },
    },
  }
</script>

I have productInfo in the props so I'm not sure why I keep getting this error.

Upvotes: 2

Views: 26027

Answers (1)

akuiper
akuiper

Reputation: 214987

I think you confused props and the child component's props, when you have:

<Product
  :id="product.id"
  :product-info="product"/>

You have a prop productInfo defined in the child component Product, not in the component ProductSlider itself, and if you define prop productInfo in ProductSlider, then you have to pass it down from the parent component, that is you need to have <ProductSlider :product-info="..."/> whenever ProductSlider is used.

Notice <Product :product-info="product"/> doesn't mean you are using the value of productInfo, product-info is the name of prop that's defined in Product component.

I think a fair analogy to use is if you think of your component as a function, props are function parameters, and required function parameters need to provided when they are called.

For your case, to eliminate the error, you can simply remove the productInfo prop from ProductSlider component since it's not used in that component.

Upvotes: 10

Related Questions