inertia icon indicating copy to clipboard operation
inertia copied to clipboard

Vue prop not reactive in dynamic component

Open chriship opened this issue 4 years ago • 3 comments

I am dynamically creating Vue components and passing props to them using the 'component' element like so:

<template v-for="(element, index) in children" :key="index">
    <component :is="element.component" v-bind="element.props" />
</template>

open(){
  let component = {
    id: this.id,
    component: 'TestComponent',
    props: {
        index: this.id,
        user: this.user
    }
  }
  this.id =  this.id + 1
  this.children.unshift(component)
}

If I update the user component in JS, the prop is reactive and I can see the result in the component:

updateLocal(){
    this.user.name = 'New name'
}

But if I call the server using the inertia post command the prop is not updated:

updateServer(){
  this.$inertia.post(route('users.update'), this.user, {
    preserveScroll: true
  })
}

Am I doing something wrong or is this a limitation of Inertia?

chriship avatar Aug 30 '21 08:08 chriship

I have same issue. @chriship have you got a solution?

kunleadeoye avatar Oct 10 '22 14:10 kunleadeoye

I have same issue. @chriship have you got a solution?

Honestly, I cannot remember. Sorry. I think I might have made some workaround with axios posts instead of inertia.

chriship avatar Oct 10 '22 15:10 chriship

Ok, thanks. I'll work around it with axios.

kunleadeoye avatar Oct 10 '22 15:10 kunleadeoye

Facing the same issue.

image

The issue is in this piece of code the StepComponent is not reflecting changes on returning following response from the laravel controller:

image

Following are my observations:

  1. The computed property is not returning the correct component like if it got cached and returning the same thing again and again.

  2. So I tried following piece of code:

image

Here I tried making the StepComponent non computed but still the problem exists.

  1. Manual Visit i.e. If I visit the intended URL with Inertia.visit() things are working fine. Like if I made a axios call to the server then onSuccess I do Inertia.visit() then it's working fine.

krishaantechnology avatar Feb 02 '23 10:02 krishaantechnology

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️

reinink avatar Jul 28 '23 01:07 reinink