vue 3 props are not passed to the child element

Question

im a newbee, so help me someone please, im trying to pass an obj to child element as a prop, but i get an arr[0] val instead of {id: 1, name: 'General'}

there i bind prop value, currentRoom is an const with Object.

<input-message :currentRoom="currentRoom"/>

currentRoom`s value is correct there and equals to {id: 1, name: 'General'}

in child element i try to get props that way:

const props = defineProps({
        currentRoom: Object
});

The whole code:

container.vue

<template>
 <AppLayout title="Dashboard">
     <template #header>
         <h2 class="font-semibold text-xl text-gray-800 leading-tight">
             Chat
         </h2>
     </template>

     <div class="py-12">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
             <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                 <message-container :room="currentRoom"/>
                 <input-message :currentRoom="currentRoom" :customText="'blablabla'"/>
             </div>
         </div>
     </div>
 </AppLayout>
</template>

<script setup>
import AppLayout from '../../Layouts/AppLayout.vue';
import MessageContainer from "./messageContainer.vue";
import InputMessage from "./inputMessage.vue";
import {defineComponent} from "vue";

defineComponent([
 AppLayout,
 MessageContainer,
 InputMessage
])

let chatRooms = [];
let currentRoom = [];
let messages = [];

const getRooms = () => {
axios.get('/chat/rooms')
.then( response => {
   chatRooms = response.data;
   setRoom(response.data[0]);
})
.catch(error => {
   console.log(error);
})
}
const setRoom = (room) => {
 currentRoom = room;
<!-- if i console.log currentRoom here, it displayed correctly!!!! -->
 console.log(currentRoom)
 getMessages();
}
const getMessages = () => {
 axios.get('/chat/rooms/' + currentRoom.id + '/messages')
 .then(response => {
     messages = response.data;
 })
 .catch(error => {
     console.log(error);
 });
}
getRooms();
</script>

inputMessage.vue

<template>
    <div class="relative h-10 m-1">
        <div style="border-top: 1px solid #e6e6e6;" class="grid grid-cols-6">
            <input
                type="text"
                v-model="message"
                @keyup.enter="sendMessage"
                placeholder="Say something..."
                class="col-span-5 outline-none p-1"
            />
            <button
                @click="sendMessage"
                class="place-self-end bg-gray-500 hover:bg-blue-700 p-1 mt-1 rounded text-white">
                Send
            </button>
        </div>
    </div>
</template>

<script setup>

    const props = defineProps({
        currentRoom: Object
        // customText: Text
    });
    console.log(props.currentRoom);
</script>

<style scoped>

</style>

Answer 1

UPDATE

You currentRoom data property is not reactive. So, I guess, it triggers no updates to the props. You should define it this way:

const currentRoom = reactive({});

or

const currentRoom = ref({});

In case of ref() you have then change the value of the ref like this

currentRoom.value = room;

Hope it helps.

---

Your currentRoom is an Array. That's why you get [] in the console, when your array is empty.

Check your axios request if you get any data at all. (Browser DevTools Network Tab)

Generally, you should pass one room item to your currentRoom prop or threat your prop as array.

Like this:

<table border=1>
  <tbody>
    <tr v-for="(room, index)  in props.currentRoom">
       <td>{{index}}</td>
       <td>{{room.id}}</td>
       <td>{{room.name}}</td>
    </tr>
  </tbody>  
</table>

Here is a working playground

Answer 2

Just do it right way and it will work.

 const { createApp, ref } = Vue; const MyComponent = { props: { currentRoom: { type: Object, default: {} } }, setup(props) { console.log(`props.currentRoom: ${JSON.stringify(props.currentRoom)}`) }, template: `<div class="MyComponent">currentRoom: {{JSON.stringify(currentRoom)}}</div>` } const App = { components: { MyComponent }, setup() { const rooms = ref([]); const addRoom = () => { rooms.value.push( {id: rooms.value.length + 1, name: 'General'} ); } return { rooms, addRoom } } } const app = createApp(App) app.mount('#app')

 .MyComponent { border: 1px solid grey; padding: 12px; margin: 4px; }

 <div id="app"> App.rooms: {{rooms}}<hr/> rooms[0]: <my-component:current-room="rooms[0]"></my-component> rooms: <my-component v-for="room in rooms":current-room="room"></my-component> <button type="button" @click="addRoom()">Add Room</button> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>