Vue v-row and v-col conditional rendering question

user_7441113 0
Viewed 1322

So i have a vuetify template that looks like this

<v-row>
 <v-col cols="1"> Text </v-col>
 <v-col cols="1" v-if="condition"> .. </v-col>
 <v-col cols="1" v-if="condition"> .. </v-col>
 <v-col cols="1" v-if="!condition"> .. </v-col>
 <v-col cols="1" v-if="!condition"> .. </v-col>
 <v-col cols="1" v-if="!condition"> .. </v-col>

</v-row>

So my question is instead of adding a v-if to all of my v-cols is there a way to group them i tried the following:

<v-row>
 <v-col cols="1"> Text </v-col>
 <div v-if="condition>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
 </div>
 <div v-if="!condition>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
 </div>

</v-row>

But the div tag changes the UI and displays the v-col's vertically is there a tag i can use for this

vuetify.js vue.js
1 Answers

For this you can simply use the good 'ole template tag like this:

 <template v-if="condition>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
 </template>
 <template v-if="!condition>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
 </template>
user_48267400
Related