VueJs - Pushing created item to existing array and having it display with the other existing items

Question

I'm executing a POST request using Vue to insert a new record to the database. This is working as expected and the next target is to have the newly created item pushed to the existing array and have it display in a table. This is being done in a Vue component.

This is the form that is being submitted:

<form @submit.prevent="createUser">

This is the javascript part:

export default {
    data(){
        return{
            users: {},

            form: new Form({
                name: '',
                email: '',
                password: '',
                type: '',
                bio: '',
                photo: '',
            })
        }
    },
    methods:{
        displayUsers(){
            axios.get('api/user').then( ({data}) => (this.users = data) )
        },

        createUser(){
            this.form.post('api/user').then( ({ data }) => 
                 this.users.push(data.data)
            );                
        }
    },
    created() {
        this.displayUsers();                        
    }
}

From the createUser method, the entry is posted to the database and the created entry pushed to the existing users array. My backend code returns this data i.e.

return response()->json(['data' => $request->all()], 200);

Was thinking this would be enough to get the new entry to display on the table automatically without refresh as the users array has been updated but this is not happening.

The table displaying all the items looks like this:

<tr v-for="user in users" :key="user.id">
     <td>{{ user.id }}</td>
     ....

So what I'm i missing? Is there an extra step needed for my freshly created entry to be pushed automatically to my table?

Isn't the issue that your users variable is an object and not an array? How do you display the users? — Torben
– Torben, Commented Apr 24, 2019 at 8:33
hi @Torben.. i display the users using the displayUsers method. and i just changed my users variable definition from an object to array as you have mentioned and the result is the same — suo
– suo, Commented Apr 24, 2019 at 8:39

Krantisinh · Accepted Answer · 2019-04-24 09:04:24Z

1

Try this -

In the createUser method, when you are assigning the newly created user, avoid mutation.

createUser(){
    this.form.post('api/user').then( ({ data }) =>{
        this.users = [ ...this.users, data.data ];
    });
}

This will help vue identify that the list has changed as we are assigning an entirely new array to users everytime a new user is created.

The push method modifies the same array. The spread operator helps avoid this mutation as we are copying all users in the new array along with newly created user.

answered Apr 24, 2019 at 9:04

Krantisinh

1,72915 silver badges18 bronze badges

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

2 Comments

suo Over a year ago

This works. Thankyou! the created item is pushed to the table instantly. it's being pushed to the end though, any idea how it can display at the top? And thankyou for introducing me to the Spread Operator, will study it deeper

Krantisinh Over a year ago

To push it to the top, you just have to do this - this.users = [ data.data, ...this.users];

Collectives™ on Stack Overflow

VueJs - Pushing created item to existing array and having it display with the other existing items

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related