Laravel - Vue (b. Inertiajs): Props Handling

Question

Im using Laravel + Inertiajs (Vue). Im rendering a page with a Prop. "organizations".

public function index()
{
    $this->access();
    $companyOrganisations = $this->user->companyUser->company->organisations;

    return Inertia::render('CompanySettings/CompanyOrganisations', [
        'organisations' => $companyOrganisations,
    ]);
}

Index View:

<!-- Existing Organisations -->
<div class="col"
     v-for="(organisation, index) in organisations"
     :key="organisation.id"
     :ref="organisations">

    <!-- Code -->
</div>

<Link class="link-success"
      href="#"
      @click.prevent="createOrganisation()">
    <i class="fa fa-check-square-o p-1"></i>
</Link>

Vue.js: createOrganization()

export default {

    components: {
        Card,
        Textarea,
        Link,
    },

    props: [
        'organisations',
    ],

    data: function () {
        return {
            manageOrganisations: [],
            newOrganisation: {
                name: '',
                description: '',
            }
        }
    },

    methods: {
        createOrganisation() {
            axios.post('company-organisations-create', {
                name: this.newOrganisation.name,
                description: this.newOrganisation.description
            })
                .then((response) => {
                    // Add Organisation to DOM
                    this.organisations.push(response.data.newOrganisation);
                    console.log(this.organisations);        // <-- New Organization added is fine
                }).catch((error) => {
                window.Toast.error(error.message);
            });
        },
        // Other Code
    }
}

So, after I sent the new Organization-Data to Server & Database, I receive the new Object newOrganisation from Server as json, which I push to this.organisations. This works fine so far. And I see the new Organization has been added in DOM (v-for loop), for a milisecond. Until, a little partial refresh happens and the new Organization is lost again - cauz it goes Back to old values (from index rendering).

How can I keep the new Value & stop refreshing the prop. by the old Value? Or what Am I doing wrong?

Thanks alot!

Props are not meant to be modified from within a component. You could either add a new property to your data object and then set it with the organisations data in the mounted hook so that you can manipulate it (use that instead of organisations going forward), or you could do a partial reload. — Rwd
– Rwd, Commented Sep 2, 2021 at 14:37

Matheus Dal'Pizzol · Accepted Answer · 2021-09-02 15:41:42Z

1

I can't see why you need to use axios here and handle all of that logic in your Vue component.

You can simply make the post request via this.$inertia.post and in your Laravel controller simply redirect the user to the page you're at.

This way inertia will handle all the updates needed automatically.

JavaScript

export default {
   methods: {
      createOrganisation() {
         this.$inertia.post('company-organisations-create', {
            name: this.newOrganisation.name,
            description: this.newOrganisation.description
         })
      }
   }
}

PHP

// create new organization
return redirect()->back();

answered Sep 2, 2021 at 15:41

Matheus Dal'Pizzol

6,1253 gold badges24 silver badges31 bronze badges

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

4 Comments

Matheus Dal'Pizzol Over a year ago

I believe there's nothing to worry about here. Inertia will handle the redirects as an SPA, it will not reload the entire page. This is the whole purpose of it. Give it a try... I'm using this in production for months and everything is working great...

Carlson Over a year ago

How about performance? Intertia will request Data from Database again (see index) - or isit possible to push object directly?

Matheus Dal'Pizzol Over a year ago

Yes... In this case it will pull the data from the database again. But it shouldn't be a problem since you probably paginating that anyway. Another benefit is that you don't have to worry about sorting the records. If you let Inertia pull the records from the database, the list will already be sorted. If you do it the "axios way", the new record will render at the end, even if that's not the correct position for it in the list.

Matheus Dal'Pizzol Over a year ago

If this still isn't good enough for you, take a look at this link were I answered something similar: stackoverflow.com/questions/68994504/…

Collectives™ on Stack Overflow

Laravel - Vue (b. Inertiajs): Props Handling

1 Answer 1

JavaScript

PHP

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

JavaScript

PHP

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related