Question

我有以下代码

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

在此处定义了marker-popup：

<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在这里更新：

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()));



            }

但是，它不会影响v-for语句。每当addPoint（）方法运行时，它都会以两种方式之一改变pointsArray

它推向阵列 - 这很好用，v-for是完美的
它根据Vue.js文档推荐here的内容更改数组中的元素。这根本不起作用。我的console.log语句告诉我更改发生在pointsArray中 - 尽管我尝试了他们推荐的更改数组的方法，但Vue没有对该更改作出反应。

我想，我可以删除该元素，然后推送它，但这种方法看起来很笨拙，这应该按照他们的文档工作。

Answer 1

事实证明我正在做的一切正确，但vue-leaflet package与Vue 2.0不能很好地协调，并拒绝正确反应。切换到this解决了所有问题。

为什么我的v-for语句没有对Vue做出正确反应？

1 个答案: