How to use v-for (Vue.js) to loop a JSON object and split the rendered DOMs into two div containers?
Question
I have an Axios callback that returns a JSON formatted array that contains 170 key:value pairs. Now I use v-for to render one div container per key:value pair into another div wrapper (so the results are shown as a column).
My estimated output is to have two columns as DOM output, each with 85 key:value pairs.
How can someone make v-for to jump to the second div wrapper once it iterated the first 85 (50%) of the JSON array to endup with two columns created next to each other (assuming html/css structure is fine obv.)?
Thank you very much for your ideas in advance!
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 answers
solution1
3 ACCPTED 2019-11-05 19:22:12
The point is creating a set of computed values that only return the first (or second) half of the object you get from the API. By using computed values, the original response will stay "intact" for future processing.
It's not a DRY solution (but can be modified to be), and I would create a component for the columns - but in this snippet I just used a simpler form of display ( <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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.