CODEWITHSUNDEEP
vue.js
David Neto
David Neto

Reputation: 808

How to pass multiple props from parent to child component in Vue

I'm trying to pass two properties from parent to child, but for some reason this isn't working and all the examples I've found refer to passing a single property. What I've tried to do is:

Parent vue component:

<template>
  <div class="statistics_display">
    <multiLineChart :rowsA="reading['A'].price_stats" :rowsB="reading['B'].price_stats"></multiLineChart>
  </div>
</template>

multiLineChart vue component:

export default {
  name: 'MultiLineChart',
  props: ['rowsA', 'rowsB'],
  mounted: function() {
      console.log(this.rowsA);
  }

the console log is returning undefined. If I executethe exact same code and pass a single prop, it returns the expected prop contents. What am I missing?

Upvotes: 4

Views: 8912

Answers (1)

acdcjunior
acdcjunior

Reputation: 135862

HTML attributes are case-insensitive, so

<multiLineChart :rowsA="reading['A'].price_stats" :rowsB="reading['B'].price_stats"></multiLineChart>

Are actually bound to props: ['rowsa', 'rowsb'].

If you want props: ['rowsA', 'rowsB']to work, use, in the template: :rows-a="..." and :rows-b="...".

See it working below.

Vue.component('multilinechart', {
  template: "#mtemplate",
  props: ['rowsA', 'rowsB'],
  mounted: function() {
      console.log(this.rowsA, this.rowsB);
  }
})
new Vue({
  el: '#app',
  data: {
    reading: {A: {price_stats: 11}, B: {price_stats: 22}}
  }
});
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <div class="statistics_display">
    <multiLineChart :rows-a="reading['A'].price_stats" :rows-b="reading['B'].price_stats"></multiLineChart>
  </div>
</div>

<template id="mtemplate">
  <div>I'm multilinechart</div>
</template>

Upvotes: 6

Related Questions