Why is my v-for statement not reacting to Vue properly?

I have the following code

<marker-popup v-for="point in pointsArray" :position="point.latlng" :title="point.name" > </marker-popup>

with marker-popup defined here:

<template>
  
    <l-marker :position="position" :title="title" :draggable="false">
      <l-popup :content="text"></l-popup>
    </l-marker>
</template>

<script>
    export default {

        name: 'MarkerPopup',
        props: ['position','title'],

        computed: {
            text: function(){
                return "<b>" + this.title + "</b><br>" 
                    + this.position[0] + ", " + this.position[1];
            }
        }
    }
</script>

<style lang="scss">

</style>

pointsArray is updated here:

addPoint: function(data) {

                let alreadyExists = false;
                if(this.pointsDictionary[data.uid]!=undefined){
                    alreadyExists = true;
                }
                this.pointsDictionary[data.uid] = {};
                
            
                this.$set(this.pointsDictionary,data.uid,{
                    'name': data.name,
                    'latlng': data.latlng,
                    'uid': data.uid
                });
            //    this.pointsDictionary[data.uid]['name'] = data.name;
              //  this.pointsDictionary[data.uid]['latlng'] = data.latlng;

                //  this.points[data.uid]["marker"] = null;
                if(alreadyExists){
                    console.log("exists");
                    var index = this.pointsArray.find(function(point){
                        return point.uid == data.uid;
                    });
                    //this.$set(this.pointsArray,index,this.pointsDictionary[data.uid]);
                    this.pointsArray.splice(index,1,this.pointsDictionary[data.uid]);
                }
                else {
                      this.pointsArray.push(this.pointsDictionary[data.uid]);
                }
              

                console.log(JSON.stringify(this.pointsDictionary));
                console.log(JSON.stringify(this.pointsArray2()));



            }

However, it does nothing to affect the v-for statement. Whenever the addPoint() method runs, it alters pointsArray in one of two ways

It pushes to the array – this works fine, v-for is perfect
It changes an element in the array according to what the Vue.js docs recommend here. This does not work at all. My console.log statements tell me that the change occurs in pointsArray – Vue does not react to that change despite me trying their recommended approach for changing arrays.

I could, I suppose, remove the element and then just push it but that approach seems clumsy and this should work according to their docs.

Answer

Turns out that I was doing everything right but the vue-leaflet package doesn’t play nicely with Vue 2.0 and refuses to properly react. Switching over to this one solved all the problems.

Advertisement

Answer