javascript - 将无效值传递给数据变量

Question

抱歉我的英语不好，你好，我是 Vue 的初学者，我有 iussue，无法解决。我从API加载有关艺术的数据(只是一个字典列表)，然后我制作多数组(列表列表)，当我保存原始response.data时，我的多数组在vue实例的数据变量中，我得到了类似的数据，但我不更改源列表:

在原始变量字段中，offsetX 和 offsetY 不得存在。而且场高也被打破了。该字段还传递原始变量，我不知道为什么。我的应用程序代码:

$(document).ready(function () {

    var app = new Vue({
        el: '#app',
        data: {
            raw: null,
            info: null,
            art_width: 252,
            window_width: null,
            window_height: null,
        },
        mounted() {
            this.window_width = window.innerWidth
            this.window_height = window.innerHeight 
            axios({
                method: 'get',
                url: '/content/art',
                contentType: 'application/json'
            })
            .then(function (response) {
                app.raw = response.data.items.slice();
                // If i delete create_array from app, raw variable is normal
                app.info = create_array(app.raw)
            });
            window.addEventListener('resize', () => {
                if (app.raw !== null){
                    app.info = create_array(app.raw)
                    this.window_width = window.innerWidth
                    this.window_height = window.innerHeight 
                }
            });
        },
        computed: {
            arts_in_line () {
                return parseInt((this.window_width - 24*2) / (this.art_width+10));
            },
            center_div_width ()  {
                return this.arts_in_line * (this.art_width + 10)
            }
        }
    })

});


function create_array(info) {
    // Gets number of arts in line
    arts_in_line = parseInt((window.innerWidth - 24*2) / (252+10));
    // For return 
    var multi_array = [];
    // Create mulri array
    for (var index = 0; index < info.length; index = index + arts_in_line) {
        multi_array.push(info.slice(index, index+arts_in_line));
    }
    // Save vertical offsets
    var top_offset = []
    for (var row = 0; row < multi_array.length; row ++) {
        for (var col = 0; col < multi_array[row].length; col ++) {
            // scale of art
            let scale = 252 / multi_array[row][col]['width'];
            // Calculation new height and offsetX/Y values
            if (row == 0) {
                top_offset[col] = parseInt(multi_array[row][col]['height'] * scale) + 10;
                multi_array[row][col]['offsetY'] = 0;
                multi_array[row][col]['offsetX'] = (252+10) * col + 'px';
                multi_array[row][col]['height'] = multi_array[row][col]['height'] * scale + 'px';
                multi_array[row][col]['width'] = 252 + 'px';
            } 
            else {
                multi_array[row][col]['offsetY'] = top_offset[col] + 'px';
                top_offset[col] = top_offset[col] + parseInt(multi_array[row][col]['height'] * scale) + 10;
                multi_array[row][col]['offsetX'] = (252+10) * col + 'px';
                multi_array[row][col]['height'] = multi_array[row][col]['height'] * scale + 'px';
                multi_array[row][col]['width'] = 252 + 'px';
            }
        }
    }
    return multi_array;
}

Answer 1

而不是做

// Create mulri array
    for (var index = 0; index < info.length; index = index + arts_in_line) {
        multi_array.push(info.slice(index, index+arts_in_line));
    }

您只需创建一个新数组 multi_array 并循环遍历 info 即可将所需内容添加到 multi_array 中。例如

    var multi_array = [];
    // Save vertical offsets
    var top_offset = []
    for (var row = 0; row < info.length; row ++) {
        for (var col = 0; col < info[row].length; col ++) {
             let scale = 252 / parseInt(info[row][col]['width']);

             const temp = {
                id: info[row][col]['id'],
                // Additional values you want
                height: (parseInt(multi_array[row][col]['height']) * scale) + 'px'
             }

             multi_array[row][col] = temp
        }
    }

    return multi_array;

这样您就可以在新数组中添加和排除您想要的任何键。