Apply condition class to v-col-CodePudding

I'm trying to apply condition class to my v-col

<v-row v-for="(rule, index) in ruleDetails" :key="index">
<v-col
    :
>
    
</v-col>
</v-row

and rule.width = 'medium' right now.

It doesn't seem to take any effect.

Did I forget something ?

CodePudding user response：

You can make it an array.

<v-row v-for="(rule, index) in ruleDetails" :key="index">
  <v-col :>
    
  </v-col>
</v-row

This resolves in :md-3" />

const rule = {
  width: 'medium'
}

console.log([rule.width == 'large' && 'md-4', rule.width == 'medium' && 'md-3'])

CodePudding user response：

You can use md attribute directly in <v-col> instead of class. To achieve this, You can apply one more property as value along with width in each object.

Demo (Run this code snippet in full page) :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    ruleDetails: [{
      width: 'small',
      value: 2
    }, {
      width: 'medium',
      value: 3
    }, {
      width: 'large',
      value: 4
    }]
   }),
});

#app { padding: 1% 5% }

<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-row v-for="(rule, index) in ruleDetails" :key="index">
    <v-col :md="rule.value" style="background-color: yellow">
      {{ rule.width }}
    </v-col>
    </v-col>
  </v-row>
</div>