Level 53
Hmm. What do you mean that it repeats the last item? Do you mean the last item in the array or what? Since, unshift adds to the front of the array, I am wondering the answer.
Dec 22, 2016
13
Level 24
Vue unshift only repeats the last item
I am using v-for in an array of objects. I can push new items to this array and it renders perfectly fine but when I use unshift, it only repeats the last item in the array.
methods: {
AddPost : function (event) {
var self = this;
$.ajax({
type: 'post',
url: self.$root.PostsURL + 'create',
data: {
type:self.type,
page_id : self.selected,
body: self.body
},
dataType: 'JSON',
success: function (response) {
self.$parent.ProcessData.data.unshift(response[0]);
self.body = '';
},
error: function (e) {
console.log(e);
}
});
event.preventDefault();
}
Level 24
yes, it renders again the last item of the array again. It seems like the actual array is updating properly but the vue is not rendering the correct item and only duplicating the last one.
Level 53
Well, that says to me that maybe this is not what you expect.
Level 24
The weird thing is that if I do a push. it does work and renders the correct item.
Level 53
Can you console.log(response[0])?
Level 24
I am getting an object.
Object__ob__: ObserverblogID: nullget blogID: reactiveGetter()set blogID: reactiveSetter(newVal)body: "hello"get body: reactiveGetter()set body: reactiveSetter(newVal)comments: 0get comments: reactiveGetter()set comments: reactiveSetter(newVal)created_at: "2016-12-22 20:50:13"get created_at: reactiveGetter()set created_at: reactiveSetter(newVal)id: 9get id: reactiveGetter()set id: reactiveSetter(newVal)liked: 0get liked: reactiveGetter()set liked: reactiveSetter(newVal)likes: 0get likes: reactiveGetter()set likes: reactiveSetter(newVal)location: (...)get location: reactiveGetter()set location: reactiveSetter(newVal)photo_id: 0get photo_id: reactiveGetter()set photo_id: reactiveSetter(newVal)slug: nullget slug: reactiveGetter()set slug: reactiveSetter(newVal)tags: nullget tags: reactiveGetter()set tags: reactiveSetter(newVal)title: nullget title: reactiveGetter()set title: reactiveSetter(newVal)user_id: 1get user_id: reactiveGetter()set user_id: reactiveSetter(newVal)username: "abi-salazar"get username: reactiveGetter()set username: reactiveSetter(newVal)video_code: nullget video_code: reactiveGetter()set video_code: reactiveSetter(newVal)__proto__: Object
Level 53
Well, you received an object but was expecting an array. Maybe its not in the array position that you expected. try investigating that.
Level 24
oh well, I am getting an array of objects and I want to prepend the object to the array. I just took a loot at the array of objects with the vue tools and its working fine. it seems to be its only the rendering that its not working properly.
Level 53
Well, that is not too hard of a fix.
Level 7
same thing happens to me. @Abi have you found a solution?
Level 24
@Eco012390 , No I haven't mate. I just did a quick fix for now "reorder the items by date" but I will come back to it as I need to finish other things.
Level 20
If you're using Vue 1, try adding track-by="$index" to your v-for element.
If using Vue2, try binding a unique key to the v-for like :key="user.user_id"
1 like
Level 24
@clay , oh thanks mate adding the key worked.
1 like
Please or to participate in this conversation.