How to pass data to Vue JS components?

Question

Disclaimer: I have tried to read the docs before opening this question.

I have this component:

<template>
  <accordion id="facilities-menu" :one-at-atime="true">
    <template v-for="facilities in facilitiesGroups">
      <panel class="accordion-toggle" :header="`Facilities #${$index+1}`" :is-open="$index === 0">
        <ul>
          <li v-for="facility in facilities">
            {{facility}}
          </li>
        </ul>
      </panel>
    </template>
  </accordion>
</template>

<style lang="scss" scoped>
  @import "../../../styles/theme-colors.scss";

  .panel {
    background: #5E6466;
    border: none;
  }
</style>

<script>
  import { accordion, panel } from 'vue-strap'

  module.exports = {
    components: {
      accordion, panel
    },
    data () {
      return {
        'facilitiesGroups': [['Continente Alfragide', 'Jumbo Almada', 'Portugália'], ['Pingo Doce', 'Lidl', 'Allegro'], ['Casa']]
      }
    }
  }
</script>

And then I instantiate this component like this:

<template>
  <div class="user">
    <user></user>
  </div>
  <facilities></facilities>
</template>

<style lang="scss" scoped>
  @import "../../../styles/theme-colors";

  .user {
    width: 100%;
    height: auto;
    margin-top: 8%;
    margin-bottom: 5%;
  }
</style>

<script>
  import User from './userProfile'
  import Facilities from './groupedFacilities'

  module.exports = {
    components: {
      'user': User,
      'facilities': Facilities
    }
  }
</script>

However, you can see that in the first component I am defining the data to be { 'facilitiesGroups': [['Continente Alfragide', 'Jumbo Almada', 'Portugália'], ['Pingo Doce', 'Lidl', 'Allegro'], ['Casa']] }. But i want this to be passed as an argument, not to be statically defined in the component as it is now.

I have read the docs about how could this be done here. But their example...

Vue.component('child', {
  // declare the props
  props: ['msg'],
  // the prop can be used inside templates, and will also
  // be set as `this.msg`
  template: '<span>{{ msg }}</span>'
})

...Resembles nothing to what I have in my code... I don't even use Vue.component() anywhere!

How come I am using a different "style" of coding with Vue JS (I started from their boilerplate)?

How can I map Vue JS official documentation to this "style"?

How can pass that array as an argument/property?

Thanks!

Answer 1

Your component needs to declare the data you want passed in as 'props'

<script>
  import { accordion, panel } from 'vue-strap'

  module.exports = {
    components: {
      accordion, panel
    },
    props: ['facilitiesGroups']
  }
</script>

... then in your parent component template you pass your data as an attribute. Below is an example where "facilitiesGroups" is a data element of your parent component:

<template>
  <div class="user">
    <user></user>
  </div>
  <facilities :facilities-groups="facilitiesGroups"></facilities>
</template>