javascript - 将无效值传递给数据变量
问题描述
抱歉我的英语不好,嗨,我是 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;
}
解决方案
而不是做
// 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;
这样,您可以在新数组中添加和排除您想要的任何键。
推荐阅读
- azure - 使用个人 Microsoft 帐户登录 Oauth2 v2 失败
- arrays - Alternate for Array Sum Formula
- apache-spark - 在 Pypsark 中如何在 RDD 中获取不同的值
- amazon-s3 - 通过 Java API 列出 S3 文件夹,不包括文件
- java - 如何通过递归从数组中找到第 i 个布尔值?
- java - 我可以使用 Spring Boot 使用别人的 API 发出请求吗?
- javascript - 如何使用 angularjs 显示另一个文本值而不是显示来自 ng-repeat 的一个属性的现有值?
- sql - 如何根据 WHERE 子句中的 LAG() 结果进行过滤?
- node.js - 使用 js2xml 解析器时,\n 在 xml 响应的每一行末尾附加
- ios - 快速重新创建 iOS 13 的共享表模式(不是共享表本身,而是它的呈现方式)