Vue Js List Rendering Change Array With Splice

Question

    let vm = new Vue({
        el:"#app",
        data:{
            users:[
                {
                    name:"Murad"
                },
                {
                    name:"Maxi"
                },

            ]
        }
    })

vm.users[1] = {name:"John"};

this is not work but

vm.users.splice(0,1,{name:"John"})

and after vm.users[1] = {name:"John"};

this is work Why after splice change array with index work?

tony19 · Accepted Answer · 2022-07-15 01:53:59Z

2

Vue doesn't trigger a change for a modified array value, but does for splice

https://v2.vuejs.org/v2/guide/list.html#Mutation-Methods

Vue will automatically trigger for the following array functions:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

edited Jul 15, 2022 at 1:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 28, 2017 at 9:10

NovaPenguin

4633 silver badges8 bronze badges

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

2 Comments

Murad Sofiyev Over a year ago

I know vue doesn't trigger a change for a modified array value but your change array with splice after you can change array with index see my example

NovaPenguin Over a year ago

@MuradSofiyev JavaScript is single threaded. Doing a splice will queue up an update. You then change the value, then the update happens.

Collectives™ on Stack Overflow

Vue Js List Rendering Change Array With Splice

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