[Vuejs]-Vue v-for always removing the last element, but setting key does not work

1👍

I eventually figured this out. Basically, if you want to be removing the proper entry in a list, you can’t be using index as the v-for key, which was already established in the question. The problem was that I was trying to use the input .lat and .lng as my unique properties for the key instead. Normally this would work fine, expect that I was modifying that same property in my setPlace() function. So since I was actively modifying the same identifier I was keying on, it caused unexpected behavior in the list rendering.

The solution was simply to generate a random string as a unique id and then attach it to my inputs as input.id along with input.lat and input.lng and then use that as my v-for key instead. I didn’t need to do anything special to keep track of the id either, simply assigning a unique string to it on every push was enough to get everything working!

Leave a comment