current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have an array of elements that I supply for a vue component as a reactive data source (I'm inspecting the data with the vue chrome extension):

the view: [A,B,C,D,E]
the data: [A,B,C,D,E]

I want to move an item (D) to a new position (before B), so first I remove the element with splice, then reinsert it at the desired index:

the view: [A,D,B,C,E]   
the data: [A,B,C,D,E]

So when I hover over in the Chrome Vue inspector over the second component, in the view the third column gets highlighted. If I hover over the 3rd element in the data, in the view the 4th element get highlighted, and so on.

The view updates correctly, but I want underlying the data to follow it. In the array the elements are objects.

I guess this is because they are passed as reference?

share|improve this question
up vote 0 down vote

I think I've found it, instead of splice I should use set and remove on the vue instance: https://vuejs.org/v2/api/#Vue-set

You should avoid directly setting elements of a data-bound Array with indices, because those changes will not be picked up by Vue.js. Instead, use the augmented $set() method

share|improve this answer
    
You could make things easier for yourself by doing something like [ { value: 'A' }, { value: 'B' } ]. Also, make sure to set the :key properly in your v-for if you're using it. Writing this helps me understand a lot: jsfiddle.net/crswll/ewhewzkz/21 – Bill Criswell Dec 20 '16 at 19:28
    
Thanks, @BillCriswell ! Actually the objects I'm using are way more complex than the example I come up with (it has a lot of properties with sub-arrays, object, etc...) The other thing is: :key-ing are not only important when using v-for with <transition>? Or at least that's what I read somewhere, and that is what the console error messages were complaining about. – marchello Dec 20 '16 at 21:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.