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

l矩形组件不更新

vue-component leaflet vuejs2 vue.js

Araw · 技术社区 · 4 年前

我在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 回复 | 直到 4 年前

chans 4 年前

根据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);
}

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

2 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前