How to parse json in Vue js to use it in template

Question

<template>
    <div class="row w-20 " >
        <div class="card col-4 ">
             <ul>
                <li v-for="message in conversations.messages" :key="message.messages">
                    {{message.text}}  
                </li>        
            </ul> 
            
        </div>
    </div>
</template>

<script>
export default {
    
    props: ['conversation_index_route'],
    data() {
        return {
            conversations: [],
            url: 'http://127.0.0.1:8000/comms/conversation/',
            
        }
    },
    beforeMount() {
        this.$eventBus.$on('selectConversation', this.getConversations)
        this.getConversations();
    },
    methods: {
        getConversations(id) {
            console.log(this.url+id);
            axios.get(this.url+ id)
                .then(response => {
                    this.conversations = response.data;
                    this.conversations = JSON.parse(this.conversations.message);
                    console.log(this.conversations);

                });            
        }
    }

}
</script>

conversation_index_route:"http://127.0.0.1:8000/comms/conversation"
conversations:Object
all_staff_attended:false
centre_id:5
children:""
classes:""
cover_image:"https://via.placeholder.com/150x150"
created_at:"2020-05-30 19:01:59"
exited_users:null
id:257
last_id:null
messages:Array[1]
  0:"{"_id":1854,"text":"This is the beginning of this conversation","createdAt":"2020-05-30 19:01:59","system":true}"
parent_users:"3016"
parents:Array[1]
staff_users:"180,181"
staffs:Array[2]
status_id:1
title:"Test"
updated_at:"2020-05-30 19:01:59"
url:"http://127.0.0.1:8000/comms/conversation/"

So what shall I code to use the message text in my template to display the text messages?

Answer 1

You'd have to do JSON.parse(conversations.messages[0]).text. This way you parse the object inside messages and have access to its properties.