Property or method is not defined on the instance but referenced during render. Make sure that this property is reactive vue-js

0
votes

I am trying to pass data from one component to another in Vue.js via props, but it doesn't work and when I open the console I get this errors:

 Property or method "heading" 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

Why and how can I pass my data properly?

Here is my html of the child component:

<template>
  <div class="balance-card-container">
          <h2 class="users">{{heading}}</h2>
    <div class="s">
      <md-card class="balance-card">
        <md-card-header>
          <div class="md-title title">{{ title }}</div>
        </md-card-header>
        <md-card-content>
          <p class="number-p">2345</p>
        </md-card-content>
      </md-card>
      
      <md-card class="second-card">
              <div class="chart-wrapper">
                <chart :options="chartOptionsLine"></chart>
              </div>
      </md-card>
    </div>
  </div>
</template>

export default {
  name: "BalanceCard",
  props: ["title, heading"],

and my parent component:

<div class="charts-container">
      <BalanceCard title="Total" heading="my-heading"/>
      <BalanceCard title="Total" heading="my-heading"/>
      <BalanceCard title="Total" heading="my-heading"/>
    </div>
1
vue.js

1 Answers

0
votes

You should pass heading prop from a parent component:

<BalanceCard title="Total" heading="my-heading" />