我有一个Axios回调，该回调返回一个JSON格式的数组，其中包含170个键：值对。现在，我使用v-for将每个key：value对的一个div容器渲染到另一个div包装器中（因此结果显示为一列）。
我估计的输出将有两列作为DOM输出，每列具有85个key：value对。
一旦迭代JSON数组的前85个（50％）到最后创建彼此相邻的两列，如何使v-for跳到第二个div包装器（假设html / css结构很好就可以了。 ）？
非常感谢您的想法！
Vue.config.devtools = true;
var app = new Vue({
delimiters: ['[[', ']]'],
el: '.eurQuotesWrapper',
data() {
return {
rates: []
}},
created() {
axios
.get("http://data.fixer.io/api/latest?access_key=XXX&base=EUR")
.then(response => {
this.rates = response.data.rates;
});
}
});.column {
margin-top: 8px;
margin-left: 6px;
height: 100%;
width: 16%;
float: left;
border: 1px solid;
border-radius: 10px;
}
.headings {
text-align: center;
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 16px;
color: #2E1A6D;
margin-top: 5px;
margin-bottom: 5px;
}
.keyColumn {
float: left;
width: 15%;
height: 100%;
}
.valueColumn {
float: left;
width: 35%;
height: 100%;
}
.key {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 16px;
}
.value {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 16px;
padding-left: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>
<body>
<div class="column">
<div class="headings">EUR/XXX</div>
<div class="eurQuotesWrapper">
<div class="keyColumn">
<div v-for="(value, key) in rates" class="key">[[ key ]]</div>
</div>
<div class="valueColumn">
<div v-for="(value, key) in rates" class="value">[[ value ]]</div>
</div>
<div class="keyColumn">
<div v-for="(value, key) in rates" class="key"></div>
</div>
<div class="valueColumn">
<div v-for="(value, key) in rates" class="value"></div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</html>重点是创建一组computed值，这些值仅返回从API获得的对象的前一半（或后一半）。通过使用计算值，原始响应将保持“完好无损”以备将来处理。
这不是DRY解决方案（但可以修改为），我将为列创建一个组件-但在此代码段中，我只是使用了一种更简单的显示形式（<div v-for=""></div>]
Vue.config.devtools = true;
var app = new Vue({
delimiters: ['[[', ']]'],
el: '.eurQuotesWrapper',
data() {
return {
rates: [],
}
},
computed: {
rates1() {
const ratesArr = Object.entries(this.rates)
const ret = ratesArr.reduce((a, c, i, d) => {
if (i <= d.length / 2) a[c[0]] = c[1]
return a
}, {})
console.log('rates1', ret)
return ret
},
rates2() {
const rateArr = Object.entries(this.rates)
const ret = rateArr.reduce((a, c, i, d) => {
if (i > d.length / 2) a[c[0]] = c[1]
return a
}, {})
console.log('rates2', ret)
return ret
}
},
created() {
axios
.get("http://data.fixer.io/api/latest?access_key=XXX&base=EUR")
.then(response => {
this.rates = response.data.rates;
});
}
});/*.column {
margin-top: 8px;
margin-left: 6px;
height: 100%;
width: 16%;
float: left;
border: 1px solid;
border-radius: 10px;
}
.headings {
text-align: center;
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 16px;
color: #2E1A6D;
margin-top: 5px;
margin-bottom: 5px;
}
.keyColumn {
float: left;
width: 15%;
height: 100%;
}
.valueColumn {
float: left;
width: 35%;
height: 100%;
}
.key {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 16px;
}
.value {
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 16px;
padding-left: 20px;
}*/
.keyColumn {
float: left;
}
.valueColumn {
float: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>
<body>
<div class="column">
<div class="headings">EUR/XXX</div>
<div class="eurQuotesWrapper">
<strong>COL1</strong>
<div v-for="(value, key) in rates1">[[key]]: [[value]]</div>
<hr />
<strong>COL2</strong>
<div v-for="(value, key) in rates2">[[key]]: [[value]]</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</html>