Having trouble passing data between Components

Question

How do I pass an Object Array created by a method within my component to another component? I've tried using props but perhaps my understanding of how props work isn't correct.

<template>
    <div class="media-body">

    <ul>
        <li v-for="item in items" v-bind:class="{ active: item.active }">{{ item.text }} 
        </li>
    </ul>

      <button type="button" class="btn btn-danger" v-on:click="addItem">Test</button>

</template>

<script>


export default {

    data() {
        return {
            item: "a",
            item2: "b",
            item3: "c",
            item4: "d",
            items: [],
    }
        },  

    methods: {

        addItem: function () {

            var testArray = this.item.concat(this.item2, this.item3, this.item4);

            for (var i = 0; i < testArray.length; i++) {
                this.items.push({
                    text: testArray[i],
                    active: false   });
            }

            // if I check console.log(this.items) at this point I can see the data I want to pass
        },

    }
}

</script>

Secondary Component I'm trying to pass Data to.

<template>
    <div class="media-body">
      <div class="media-label">Title:
        <textarea class="form-control" placeholder="Title"></textarea>
        </div> 
      </div>
</template>

<script>

export default {

props: ['items'], 

data() {
    return {

    }
},  

</script>

Answer 1

To pass the props to other component you have to write following code in the first component:

1. added <secondComponent :items="items" /> in HTML code.
2. import and use secondComponent in vue component like this: components: [secondComponent]

Here is complete code with these changes:

<template>
     <div class="media-body">
     <ul>
        <li v-for="item in items" v-bind:class="{ active: item.active }">{{ item.text }} 
        </li>
     </ul>
      <button type="button" class="btn btn-danger" v-on:click="addItem">Test</button>
     <secondComponent :items="items" />
  </template>

<script>
  import secondComponent from '/path/of/secondComponent'
   export default {
    components: [secondComponent]
    data() {
        return {
            item: "a",
            item2: "b",
            item3: "c",
            item4: "d",
            items: [],
    }
        },  

    methods: {

        addItem: function () {

            var testArray = this.item.concat(this.item2, this.item3, this.item4);

            for (var i = 0; i < testArray.length; i++) {
                this.items.push({
                    text: testArray[i],
                    active: false   });
            }

            // if I check console.log(this.items) at this point I can see the data I want to pass
        },

    }
}

</script>

In the second component you have already defined items as props, which you can as well use in template/HTML of second component.