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

Question

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?

Answer 1

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/vue@2.5.13/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>