Vue2 Props are not Reactive

Hey guys,

I’ve been working on a project in Laravel Spark and Vue. I’ve begun migrating all of my Vue1 to Vue2 and ran into this issue that I would like to get your help with.

It doesn’t look like the props I’m passing in are reactive.

Say I have a component:

<dashboard :jobs="{{ $jobs }}"></dashboard>

And I accept those props in my component successfully, if I try and mutate this object, say by removing an item with splice(), it doesn’t update the view:

deleteJob(index) {
  this.jobs.splice(index, 1);
}

So the data changes, I’ve logged it and run length checks on the object before and after it has been spliced, it does remove the item from the object, but it doesn’t update the view.

The only way I can get this to work is by reassigning the props data on mounted():

mounted() {
   // now it is reactive
   this.newjobs = this.jobs
}

Is this supposed to be working like this? If not, has anyone else seen this? Thanks!

That is expected behaviour, see https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow

1 Like

@colloque Thanks!

So, should you use a watcher in this scenario?

I’m facing the same issue, were you able to resolve the issue.