CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vue-component
casper
casper

Reputation: 289

Component communication in Vue.js unable to render properly

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.
Vue DevTools inspection
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,
  },

Upvotes: 1

Views: 83

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 2

Hossein Shafiei
Hossein Shafiei

Reputation: 645

a common mistake

dont forget import child component in parent component

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

Upvotes: 0

Related Questions