如何使用 v-for (Vue.js) 循環 JSON object 並將渲染的 DOM 拆分為兩個 div 容器？
[英]How to use v-for (Vue.js) to loop a JSON object and split the rendered DOMs into two div containers?
問題描述
我有一個 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>
1 個解決方案
解決方案1
3 已采納 2019-11-05 19:22:12
重點是創建一組計算值，它們僅返回從 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>
我如何使用 vue.js 嵌套 for 循環遍歷兩個帶有 v-for 的數組
[英]How do I use a vue.js nested for loop over two arrays with a v-for
如何使用 v-for 在 vue.js 中的 object 中循環 arrays
[英]How to loop through arrays inside a object in vue.js using v-for
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.