CODEWITHSUNDEEP
vue.js
DanielM96
DanielM96

Reputation: 103

Vue : Cant display passed data in component passed information with event bus

I have a vue application and a function that pushes a router and pass data to another router component.

 passData: function () {
            EventBus.$emit('passName', this.tableRow[0]);
            this.$router.push('/analytic-two');
        }

Then the other component.

<template>
    <p>
        This is Data passed from chart component {{passedRow}}
    </p>
</template>

<script>

import { EventBus } from '../event-bus.js';

export default {
    data() {

        return {
            passedRow: [
                {
                    "name": "",
                    "numSongs": "",
                    "Year": ""
                }
            ],
            name: '',
            id: '?',

        };
    },
    created: function () {
        const self = this; 
        EventBus.$on('passName', function (value) {
            self.passedRow = value;
            console.log(self.passedRow);

        });
    },
}

</script>

I know the data is coming through and its being logged but i can't figure out how to display it in my template does anyone have any ideas.

Upvotes: 0

Views: 78

Answers (1)

reinerBa
reinerBa

Reputation: 1660

I would recommend to not using "=" operator instead of cleaning the reactive array and then fill it with the new values

self.passedRow.splice('deleteCount');
self.passedRow.push(...value);   //pushes all the values in the value-array

This way you will at least be able see the progress. You can also force a DOM-Update after setting the new value, but this should be unlikely in this case. To do so call in the component this.$forceUpdate()

Upvotes: 1

Related Questions