Vue js sync parent and child data with Vue-Router

Question

In my vuejs application i am using vue-router for routing. Everything is working fine except this one.

In my parent i have list view having a link as below on the left side .

<div class="col-md-5">
<ul>
    ....
    <a v-link="{ name: 'task-detail', params: { taskId: task.id }}">{{ task.title }}</a>
</ul>
</div>

<div class="col-md-7">
  <router-view></router-view>
</div>

When i click it, my nested route gets activated and i display detail view on the right side.

Now my problem is In my parent view i can toggle if the task is completed or not.

I have a label showing if the task is completed or not in child view.

<label class="label label-success pull-right" v-show="task.is_completed">Completed</label>

How do i reflect the status change on my child view when i do it in parent view. Do i need to refresh the page ? or is there simpler solution.

In simpler terms When i toggle completion status on parent view my label should change on child view.

Tremendus Apps · Accepted Answer · 2016-09-07 16:12:38Z

1

So vue wants you to implement a 'data down/actions up' pattern. So if your data is loaded in the parent (eg as a collection) and again loaded - separately in your child (eg as a model instance) - you have two sets of what starts as the same data. But when you change one, its independent of the other. So, you either need to communicate between the two (which can be fiddly), use a central data store, where both routes access the same instance of data (possibly using Vuex, if you're inclined), or if you have all the data you need in the collection, simply pass it downstream with, for example: <router-view :task="selectedTask" /> where the selected task is driven by the $route.params.id in your URL (as a computed property in the parent, likely)

for example if your task list was called 'tasks' in the parent, your computed property might look like this (in ES6 JS):

selectedTask () {
  return this.tasks.find(t => t.id === this.$route.params.id)
}

This data-down is the easiest to implement, but if you find you're doing this a lot, suggest using a central data store.

answered Sep 7, 2016 at 16:12

Tremendus Apps

1,59512 silver badges22 bronze badges

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

2 Comments

Tremendus Apps Over a year ago

Its also worth noting that if you choose data-down from the parent (collection) to the child (model instance) AND you require changing the task in the child, you'll need to signal the change back to the parent ("actions up") and effect that change in the parent, which will also push that down to the child (data down). Otherwise, if you have vue 1.x you could use .sync as an option in your data, but it's sorta counter-pattern to do that these days and has thus been deprecated in Vue 2.x ... but if you wanted its: <router-view :task.sync='selectedTask' />

themightysapien Over a year ago

Thank you guys. I solved it using component broadcast event system. I like @Tremendus Apps style. Next time i will surely use yours method.

Dan · Accepted Answer · 2016-09-07 15:01:39Z

0

Does it work if you try this in your child view<label class="label label-success pull-right" v-show="$parent.task.is_completed">Completed</label>

answered Sep 7, 2016 at 15:01

Dan

6,6539 gold badges43 silver badges57 bronze badges

1 Comment

themightysapien Over a year ago

i have not set a task property in the parent component. Parent only has tasks list. So i think your method works if i put the current clicked task in task property.

Collectives™ on Stack Overflow

Vue js sync parent and child data with Vue-Router

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related