[Vuejs]-Component – getting data from parent?

by

4👍

✅

The problem is that you are instantiating <tasks> components from the data in the root component, but you are not passing the current task into the <tasks> component, so it cannot access it at all.

The Vue.js guide explains how to pass the data into a component using props:

First you need to bind the current tasks to the prop (here I called it item) of the <task> component

<div id="app">
  <tasks v-for="task in tasks" :item="task"></tasks>
</div>

Note that you bind the actual object using a : in front of the property name.

Now you need to define the item property in the <tasks> component:

Vue.component('tasks', {
  props: ['item'],
  template: '#tasks-template',
});

By the way: Your code creates four instances of the <tasks> component, just in case you were wondering – this might not be what you expected your code to do exactly.

👤geekonaut

Leave a comment