我有一个 Axios 回调，它返回一个包含 170 个键值对的 JSON 格式的数组。现在我使用 v-for 将每个键值对的一个 div 容器渲染到另一个 div 包装器中(因此结果显示为一列)。
我的估计输出是有两列作为 DOM 输出，每列有 85 个键值对。
一旦 v-for 迭代了 JSON 数组的前 85 (50%) 以最终创建了两个彼此相邻的列(假设 html/css 结构很好 obv)，如何让 v-for 跳转到第二个 div 包装器.)?
非常感谢您提前提出的想法!
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/vue@2.5.13/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>最佳答案
重点是创建一组计算 值，这些值仅返回您从 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>关于javascript - 如何使用 v-for (Vue.js) 循环一个 JSON 对象并将渲染的 DOM 拆分到两个 div 容器中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58716646/