Component communication in Vue.js unable to render properly

Question

In the Parent component I have:

<todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index">

</todo-item>

which just iterates through todos array and gets each todo object and by using props passes each Object and its index to the child component. todo-item registered in Child component.
todos is an array of objects:

todos: [
        {
          'id': 1,
          'title': 'Object 1'
        },
        {
          'id': 2,
          'title': 'Object 2'
        }
      ]

Child component:

<template>
    <div class="todo-item">
         <div class="todo-item-left">
            <div>{{ todo.title }}</div>
       </div>

    </div>
</template>>

<script>
export default {
    name: 'todo-item',
    props: {
        todo: {
            type: Object,
            required: true
        },
        index: {
            type: Number,
            required: true
        }
    }
}
</script>

I don't know why it doesn't render each todo on the page, I have a blank page. Even though in Vue DevTools It shows that I have these objects.

Did I miss something?

EDIT:
There is an error, sorry the error flag were off hence didn't saw it.
Error message:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

As you can see above I did register the component in Child component.
And yes I did import the child component in Parent component by doing:

//Parent component
import ToDoItem from './ToDoItem'  
export default {
  name: 'todo-list',
  components: {
    ToDoItem,
  },

are you sure you imported & used the child component correctly? — Evan
– Evan, Commented Mar 1, 2020 at 10:09

tony19 · Accepted Answer · 2022-07-16 00:08:03Z

2

You have problem with cases so you should import that component in parent one as follows :

 import TodoItem from './TodoItem'

and register it like :

export default{
  ....
components:{
       TodoItem
    }
 ....
 }

for more details check this

edited Jul 16, 2022 at 0:08

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 1, 2020 at 11:09

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

7 Comments

casper Over a year ago

As you can see in my question post, I did import and registered in this way. But I just now saw ur answer and tried to change as you did from ToDoItem => TodoItem. And it starts working ! Why it would care how i write it ? so weird

casper Over a year ago

Initially, I wrote: import ToDoItem from './ToDoItem' components: { ToDoItem, }

casper Over a year ago

then i just did: import TodoItem from './ToDoItem' components: { TodoItem, }

casper Over a year ago

and the last one work just changed from capital D to small d.

Boussadjra Brahim Over a year ago

your component is named todo-item with cabab-case format which will be converted to camelCase format

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

a common mistake

dont forget import child component in parent component

import ChildComponent fromt './ChildComponent';
export default{
components:{
       ChildComponent 
    }
 }

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 1, 2020 at 20:26

Hossein Shafiei

6536 silver badges8 bronze badges

Collectives™ on Stack Overflow

Component communication in Vue.js unable to render properly

2 Answers 2

7 Comments

a common mistake

dont forget import child component in parent component

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

a common mistake

dont forget import child component in parent component

Comments

Your Answer

Sign up or log in

Post as a guest

Related