Is there a way to have data flow into the next column after reaching a certain width and height, without creating a new Array? Here is a demo.
new Vue({
el: '#app',
data() {
return {
lists: [{
text: 'Item1'
},
{
text: 'Item2'
},
{
text: 'Item3'
},
{
text: 'Item4'
},
{
text: 'Item5'
},
{
text: 'Item6'
},
{
text: 'Item7'
},
{
text: 'Item8'
},
{
text: 'Item9'
},
]
}
}
})
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65131000110c031c25544b504b5451">[email protected]</a>/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f5f6e6f7eae5fac3b2adb6adb2b7">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-layout class="mt-3 ml-4">
<v-flex md-4>
<div v-for="list in lists" :key="list.text">
{{list.text}}
</div>
</v-flex>
<v-flex md4>
//How can data be made to flow into this column after certain dimensions?
</v-flex>
</v-layout>
</v-app>
</div>
I am looking for a solution that involves adjusting widths and heights rather than creating a new Array to avoid manual adjustments throughout the code.