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

Can you also add the vue-instance code of the parent component? — Amresh Venugopal
– Amresh Venugopal, Commented Mar 22, 2017 at 9:02
data doesn't seem to contain messages, rooms? is that intentional? — Amresh Venugopal
– Amresh Venugopal, Commented Mar 22, 2017 at 9:06
@carrion try using a watch on rooms in your child component. I think it is an empty array because when the child component gets created the api call didn't get resolved, leading to the default value it had on the parent which is [] — Amresh Venugopal
– Amresh Venugopal, Commented Mar 22, 2017 at 9:12

Amresh Venugopal · Accepted Answer · 2017-03-22 09:20:50Z

6

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 consoled 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.

answered Mar 22, 2017 at 9:20

Amresh Venugopal

9,5895 gold badges41 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kofoworola Over a year ago

Wow thanks a lot solved my problem, as you said, when the rooms were first logged in created() it was empty but when they were logged in watch it contained all values, again thanks!!

Amresh Venugopal Over a year ago

Glad it helped :)

Collectives™ on Stack Overflow

operating on props in vue.js components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related