operating on props in vue.js components

Question

Im pretty newm to vue and i'm trying to migrate the frontend of my laravel project to vue but i'm having an issue with it, i'm trying to loop through an array of provided objects called rooms and create divs for each of the in my component as well as setting the default room_id as the first id of the room. The problem is when is access the provided prop array called 'room' in the dom (html) it works flawlessly, but in my vue code for the component file it always seems to be undefined or empty Here is my components vue code:

export default {
    created() {
        //this.loadMessages(this.room_id)
        console.log(this.first_room)  //undefined;
        console.log(this.rooms) //empty array;
    },
    props: ['rooms','first_room'],
    computes:{
        myrooms: function(){
            return this.first_room;
        }
    },
    data()
    {
        return{
            messages: [],
            newMessage: '',
            room_id: 1 //for test purposes, this works,
        }
    },
    methods: {
        loadMessages(id)
        {
            axios.get('/messages/'+id).then(response => {
                this.messages = response.data;
                console.log(response.data);
            });

        }
    }
}

the important part of the component html

<div v-for="room in rooms">
    <div class="chat-user room">
        <div v-for="other in room.others">
            <img class="chat-avatar img-circle" :src="other.image" alt="image" >                                        
            <div class="chat-user-name">
                <a :href="'/user/' + other.id">{{ other.name}}</a>
            </div>
        </div>
    </div>
</div>
//this all works, just for reference

method where i set the values passed to the prop in my main vue instance

EDIT: THE PARENT INSTANCE CODE Oh and i cant seem too access the rooms array being passed as it is always empty IN code but it loops in the html

window.App.app= new Vue({
el: '#wrapper',
data: {
    messages: [],
    rooms: [],
    test: 'yes',
    first: ''
},
created() {
    this.fetchRooms();
    this.first = 1;
},
methods: {
    fetchMessages(id) {
        console.log(id);
    },
    fetchRooms()
    {
        axios.get('/rooms').then(response => {
            this.rooms = response.data;
        });
    }
}
});

finally where i call my component

<chat-messages :rooms="rooms" :first_room="1"></chat-messages>
//variables referenced from main vue instance

I have literally torn most of my hair on this, please any help is appreciated

Answer 1

In the child component to which the props are passed on.

export default {
  created() {
    console.log(this.first_room)  //undefined;
  },
  props: ['rooms','first_room'],
  computed :{
    myrooms: function(){
        return this.first_room;
    }
  },
  data () {
    return {
        messages: [],
        newMessage: '',
        room_id: 1 //for test purposes, this works,
    }
  },
  watch: {
    rooms (n, o) {
      console.log(n, o) // n is the new value, o is the old value.
    }
  },
  methods: {
    loadMessages (id) {
        axios.get('/messages/'+id).then(response => {
            this.messages = response.data;
            console.log(response.data);
        });
    }
  }
}

You can add a watch on data properties or computed to see the change in their values.

In the question, (as what it appears to be the case), you have console d the value of the props in the created lifecycle, the props' value gets changed by an API call in the parent component, after the creation of the child component. That explains why your template shows the data but not in the console in the created lifecycle hook.