javascript - How to put components on two columns using VueJS Vuetify Grid? - Stack Overflow

admin管理员组

文章数量:1324111

I want to align two ponents to show some data on two columns, I've followed the official tutorial Vuetify Grid. On my case ponents are fixed like a rows list, on the screen I put the red square to show my goal, and show the result of the code. Also, I tried changing row to column but not works, it keep on two rows.

    <v-container>
      <v-layout row>
        <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
        <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
      </v-layout>
    </v-container>

plete code

    <template>
  <v-content class="pa-1" fluid>
    <v-btn
      color="blue"
      dark
      small
      fixed
      bottom
      right
      fab
      @click="showRegisterTransactionDialog = true"
    >
      <v-icon>mdi-plus</v-icon>
    </v-btn>

    <v-data-table
      :mobile-breakpoint="NaN"
      :headers="headers"
      :items="transactionsLocal"
      :items-per-page="3000"
      :hide-default-footer="true"
      :single-expand="singleExpand"
      :expanded.sync="expanded"
      item-key="id"
      show-expand
      sort-by="showDate"
      class="elevation-1"
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>Fluxo de caixa</v-toolbar-title>
          <v-divider class="mx-4" inset vertical></v-divider>
          <v-spacer></v-spacer>
        </v-toolbar>
      </template>

      <template v-slot:item.value="{ item }">
        <div style="color:green;" v-if="item.type == 'entry'">{{item.value}}</div>
        <div v-else style="color:red;">{{item.value}}</div>
      </template>

      <template v-slot:expanded-item="{ headers, item }">
        <v-container>
          <v-layout row>
            <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
            <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
          </v-layout>
        </v-container>
      </template>
    </v-data-table>

    <RegisterTransactionDialog
      @hideRegisterTransactionDialog="showRegisterTransactionDialog = false"
      :show="showRegisterTransactionDialog"
    ></RegisterTransactionDialog>
  </v-content>
</template>

UPDATE

I've set background color to black on v-container and discover that the problem is it. But, I don't know fix it too.

<v-container style="background-color: black;">

I want to align two ponents to show some data on two columns, I've followed the official tutorial Vuetify Grid. On my case ponents are fixed like a rows list, on the screen I put the red square to show my goal, and show the result of the code. Also, I tried changing row to column but not works, it keep on two rows.

    <v-container>
      <v-layout row>
        <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
        <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
      </v-layout>
    </v-container>

plete code

    <template>
  <v-content class="pa-1" fluid>
    <v-btn
      color="blue"
      dark
      small
      fixed
      bottom
      right
      fab
      @click="showRegisterTransactionDialog = true"
    >
      <v-icon>mdi-plus</v-icon>
    </v-btn>

    <v-data-table
      :mobile-breakpoint="NaN"
      :headers="headers"
      :items="transactionsLocal"
      :items-per-page="3000"
      :hide-default-footer="true"
      :single-expand="singleExpand"
      :expanded.sync="expanded"
      item-key="id"
      show-expand
      sort-by="showDate"
      class="elevation-1"
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>Fluxo de caixa</v-toolbar-title>
          <v-divider class="mx-4" inset vertical></v-divider>
          <v-spacer></v-spacer>
        </v-toolbar>
      </template>

      <template v-slot:item.value="{ item }">
        <div style="color:green;" v-if="item.type == 'entry'">{{item.value}}</div>
        <div v-else style="color:red;">{{item.value}}</div>
      </template>

      <template v-slot:expanded-item="{ headers, item }">
        <v-container>
          <v-layout row>
            <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
            <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
          </v-layout>
        </v-container>
      </template>
    </v-data-table>

    <RegisterTransactionDialog
      @hideRegisterTransactionDialog="showRegisterTransactionDialog = false"
      :show="showRegisterTransactionDialog"
    ></RegisterTransactionDialog>
  </v-content>
</template>

UPDATE

I've set background color to black on v-container and discover that the problem is it. But, I don't know fix it too.

<v-container style="background-color: black;">

• javascript
• vue.js
• grid
• vuetify.js

Share Improve this question Follow edited May 18, 2020 at 12:50 Augusto asked May 18, 2020 at 2:04 AugustoAugusto 4,2531010 gold badges5151 silver badges110110 bronze badges 4

• Can't reproduce. There's something else messing up your layout. – akuiper Commented May 18, 2020 at 2:40
• i couldn't see any problem when i test your case here: codepen.io/salihtopcu/pen/yLYQYob are you sure that there's no style definitions that may cause this issue? – salihtopcu Commented May 18, 2020 at 3:18
• No, there's not. I just posted the whole code, It's used inside a v-data-table, maybe have something to do it. – Augusto Commented May 18, 2020 at 3:58
• Here is a solution that you can consider – asega Commented Jun 15, 2022 at 12:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Why not try using something like this instead of v-flex:

<v-col cols="12" md="6">
</v-col>

<v-col cols="12" md="6">
</v-col>

本文标签： javascriptHow to put components on two columns using VueJS Vuetify GridStack Overflow