Vuejs: Как сделать вычисляемое свойство, которое соблюдает список элементов?

Question

Я хочу синхронизировать данные внутри двух массивов в моем приложении.Я использую vue.js.

Мой первый массив выглядит так:

    var testLayout = [
        {"x":0,"y":0,"w":2,"h":2,"i":"0"},
        {"x":2,"y":0,"w":2,"h":4,"i":"1"}
    ];

А второй, содержащий объект item, выглядит так:

    var items = [
        item {
            //other properties
            Position = {
                x,
                y,
                Width,
                Height,
                MinWidth,
                MaxWidth,
                MinHeight,
                MaxHeight
            }
        },
        ....
    ]

Я хочу, чтобы свойства внутри первого массива реагировали на изменения со второго и наоборот.Мне нужно синхронизировать мои данные следующим образом: testLayout[...].myAnonymousObject.x <=> items[...].item.Position.x

Как создать вычисляемые свойства или что-то, что я могу использовать для достижения этой цели? Я не могу изменить структуру этих двух массивов/ объекты, но мне нужно держать их в курсе изменений во всех отношениях.

Я пытался сделать это в своем экземпляре vue:

computed: {
            layout: {
                get: function () {
                    let allPositions = [];
                for (var item of items) {
                    allPositions.push(
                        {
                            x: item .Position.x,
                            y: item .Position.y,
                            h: item .Position.Height,
                            w: item .Position.Width,
                            i: item .Id
                            //do not set here min/maxW and min/maxH
                        }
                    );
                }
                return allPositions;
                },
                set: function () {
                    ???
                }
            }

        },

Но это не сработает, я не знаю, как на самом деле связать эти свойства вместе.Ты знаешь как это сделать?Я имею право использовать вычисленное свойство, чтобы сделать это?

Answer 1

Я прошел мимо чего-то похожего на мой настоящий проект. Я искал об этом, и есть опция, чтобы посмотреть глубже, это лучший вариант для массива массивов, массив объектов, объектов массивов и т.д ...

Должно быть что-то вроде этого:

watch: {
     <variableName>: { // should be the name of the variable you want to watch
        // if you want, this handler() allows 2 params like (newValue, oldValue) to compare something if you want.
        handler() {
            // do your logic
            // call a function with the logic
        },
        deep: true
    }
}