如何使用 v-for (Vue.js) 循环 JSON object 并将渲染的 DOM 拆分为两个 div 容器？

Question

我有一个 Axios 回调，它返回一个包含 170 个键：值对的 JSON 格式化数组。 现在我使用 v-for 将每个键：值对呈现一个 div 容器到另一个 div 包装器中（因此结果显示为一列）。

我估计的 output 将有两列作为 DOM output，每列有 85 个键：值对。

一旦迭代了 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>

Answer 1

重点是创建一组计算值，它们仅返回从 API 获得的 object 的前半部分（或后半部分）。 通过使用计算值，原始响应将保持“完整”以供将来处理。

它不是一个 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>