[Vuejs]-Vue.js passing data back to a component

by

0👍

✅

For this I’d recommend using Vuex or another way of maintaining state. The idea is, you receive data from the api, place it in a vuex store that is available between components, and leverage reactivity to notify the intended recipient that data is available.

When used with a plugin such as this one, your data can persist between browser sessions.

A general work flow would look like this:

axios.get('/messages/' + conversation_id, conversation_id).then(response => {
     // HOW TO SEND THEM BACK???
     this.$store.commit('setMessages', response.data)
});

Then in app.js you would use vuex’s helper functions:

computed: {
     ...mapGetters({
          messages: 'getMessages'
     })
}

The messages computed will now be reactive, meaning that you can use it in your template or other computeds and they will update accordingly:

<template>
    <ul>
        <li v-for="(message, index) in messages" :key="index">
             {{ message.content }}
        </li>
    </ul>
</template>

Leave a comment