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

Vuejs：如何使计算属性遵循项目列表？

1 个答案: