Компонент l-прямоугольника не обновляется

Question

Я использую l-прямоугольник в Vue проекте листовки. Я создаю прямоугольник следующим образом:

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

, который отображает прямоугольник на моей карте, делая это в. js -file:

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;
}

Спасибо за любую помощь и руководство!

Answer 1

Согласно документации Vue, реактивность для массива не будет работать, если вы установите значение для определенного индекса. Вместо этого вы можете использовать некоторые методы работы с массивами, которые упомянуты в Vue документации

pu sh () pop () shift () unshift () splice () sort () reverse ()

следующие выше методы делают массив реактивный

Событие клика можно заменить на

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