CODEWITHSUNDEEP
vue.jsvuetify.js
chmike
chmike

Reputation: 22134

Is it possible to create a grid layout in a list?

disclaimer: I'm just learning vue.js and vuetify and I'm not very familiar with javascript. I'm writing my first vue.js app.

I'm using vue 2.x and vuetify 2.x.

I need to create a scrolable list of items on which the user will be able to perform actions. For now, I'm just concerned about the layout of the list items.

The item is made of two visible information, a number and a text (like an inventory) that should be displayed in two columns. The numbers should be right aligned in their column and the text left aligned.

This is what I have so far.

<template>
  <v-list dense>
    <template v-for="(item, index) in items">
      <v-list-item :key="item.r">
        <v-list-item-content class="font-weight-bold">
          <v-list-item-title> 
            {{ item.n }} {{ item.t }}
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-divider :key="index"></v-divider>
    </template>
  </v-list>
</template>

<script>
export default {
  name: "itemList",
  data() {
    return {
      items: this.$store.state.currentItems,
    };
  },
};
</script>

Is it possible to use a layout inside a list item ? If not, how could I create the desired column alignment ?

In case it could influence the implementation, the actions are

An alternative to the sliding button (if not possible) is to make the number and text flat buttons with a popup menu. I guess this could influence how to define the layout.

Upvotes: 1

Views: 849

Answers (1)

hamid niakan
hamid niakan

Reputation: 2851

generally with the use of v-row and v-col you can implement a layout and this is true inside of a v-list-item-content, for example check the code below (I'm not sure if I understood the layout you've asked for correctly or not but it must give you a hint)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    items: [{
        t: 'title one',
        n: 1
      },
      {
        t: 'title two',
        n: 2
      },
      {
        t: 'title three',
        n: 3
      },
      {
        t: 'title four',
        n: 4
      },
    ],
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-list dense>
          <template v-for="(item, index) in items">
            <v-list-item :key="item.n">
              <v-list-item-content class="font-weight-bold">
                <v-row>
                  <v-col cols="6">
                    <v-row no-gutters justify="end">{{ item.n }}</v-row>
                  </v-col>
                  
                  <v-col cols="6">
                    <v-row no-gutters>{{ item.t }}</v-row>
                  </v-col>
                </v-row>
              </v-list-item-content>
            </v-list-item>
            <v-divider :key="`divider-${item.n}`"></v-divider>
          </template>
        </v-list>
      </v-container>
    </v-main>
  </v-app>
</div>

Upvotes: 1

Related Questions