CODEWITHSUNDEEP
vue.js
xotix
xotix

Reputation: 520

Rendering several components in a grid

Imagen we have a little stock application. Here we make a list off all available stocks.We have a stocks.vue component, the code below, and a stock.vue component. We have 4 stocks here. We want to render them in a 2x2 grid. The code below renders them in a 1x4 grid. A div.columns holds up to 12 div.column (Bulma), so for our 2x2 grid we'd need two div.columns each holding two div.column and each div.column would hold a stock.

<template>
    <div>
        <p>Current stocks:</p>
        <div class="columns">
            <div class="column" v-for="stock in stocks">
                <app-stock :stock="stock"></app-stock>
            </div>
        </div>
    </div>
</template>

<script>
    import Stock from './stock.vue';

    export default {
        data() {
            return {
                stocks: [
                    { name: 'BMW', value: '23' },
                    { name: 'Apple', value: '223' },
                    { name: 'Sony', value: '43' },
                    { name: 'EDA', value: '235' }
                ]
            }
        },
        components: {
            appStock: Stock
        }
    }
</script>

Now, what's a good way to rewrite the above code such that it renders our stocks in a 2x2 grid? Would it maybe be better to first rearrange our data in a computed such that it represents or view more appropriately i.e. in this case into a 2 dimensional array of objects?

Upvotes: 0

Views: 462

Answers (2)

Air
Air

Reputation: 599

Rodurico's answer is definitely correct.

Adding the Bulma class "is-multiline" to the columns div, and "is-half" class to the stock column div is all you need to (and all you should) modify to achieve the desired grid layout.

As Rodurico provided:

<div class="columns is-multiline">
  <div class="column is-half" v-for="stock in stocks">
    <app-stock :stock="stock"></app-stock>
  </div>
</div>

Regarding the second part of your question, should you rearrange your data in a more appropriate way in a computed property to display it in a 2x2, the answer is no.

Your data is a list of individual and unrelated items. Each stock item exists on its own, completely independent from the other items. 

[item1, item2, item3, item4]

Organizing the data into another structure (such as a 2D array) would imply some sort of shared relationship or commonality between the items that share a row with each other.

[ [item1, item2], [item3, item4] ]

This format suggests item1 and item2 are somehow more closely related than item3 and item4, and that is not the case.

Though there are potentially some scenarios that might warrant reformatting your data for the purpose of displaying it, in the vast majority of scenarios, how it is displayed should be defined in the template/layout.

In fact, not only is having the data in a 2D array not required (or helpful) to display it in a 2x2 grid, doing so could actually present various new challenges.

Say for example you want to sort or search the data, it now needs to look inside arrays to compare the values, or say you want to add or remove an item, this now requires modifying considerably more arrays instead of just the one.

In this case, those changes wouldn't present such challenges, because if applied to the stocks object its computed properties would reflect those changes automatically. But I think the point is still relevant. Having to create and populate more complex datatypes whenever your array is modified isn't going to be faster. And if the result you're looking for can be achieved by adding minimal CSS classes or rules, that is hands down the approach that should be taken.

I hope that answers the other half of your question.

Upvotes: 1

rodurico
rodurico

Reputation: 771

You are missing is-multiline and is-half :

    <div class="columns is-multiline">
        <div class="column is-half" v-for="stock in stocks">
            <app-stock :stock="stock"></app-stock>
        </div>
    </div>

Docs about it can be find here.

Upvotes: 1

Related Questions