代码之家 › 专栏 › 技术社区 › Araw

l矩形组件不更新

vue-component leaflet vuejs2 vue.js

1

Araw · 技术社区 · 6 年前

我在Vue单张项目中使用l矩形。我正在创建一个矩形,如下所示:

<l-rectangle :bounds="rectangle"></l-rectangle>

在.js文件中显示地图上的矩形:

new Vue({
    el: '#app',
    data: function() {
        return {
            rectangle: [[69.81310023846743, 16.929931640625004],[69.11310023846743, 16.129931640625004]]
               }
    }
});

我已经创建了一个map click事件,在这个函数中,我正在更改矩形数组的坐标,以便使矩形改变大小/形状。但什么也没有发生(函数被调用但矩形不变):

clickEvent:function(event)
{
        var point = [event.latlng.lat,event.latlng.lng];
        this.rectangle[0] = this.rectangle[0];
        this.rectangle[1] = point;
}

感谢您的帮助和指导!

1 回复 | 直到 6 年前

1

chans 6 年前

根据Vue文档,如果为特定索引设置值,则数组的反应性将不起作用,相反,可以使用中提到的一些数组操作方法 Vue documentation

推() 移位() 取消移动() 拼接() 排序()

以下方法使阵列成为无功的

单击事件可以替换为

clickEvent:function(event)
{
        var point = [event.latlng.lat,event.latlng.lng];
        this.rectangle.splice(0, 1, this.rectangle[0]);
        this.rectangle.splice(1, 1, point);
}