l 矩形组件不更新答案

【问题标题】：l-rectangle component does not updatel 矩形组件不更新
【发布时间】：2020-03-05 06:21:04
【问题描述】：

我在 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]]
               }
    }
});

我创建了一个地图点击事件，在这个函数中我改变了矩形数组的坐标，以使矩形改变大小/形状。但是什么都没有发生（函数被调用但矩形没有改变）：

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

感谢您的帮助和指导！

【问题讨论】：

标签： vue.js vuejs2 leaflet vue-component

【解决方案1】：

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

【讨论】：