将条件类应用于v-col

Question

我正试着把条件类应用到我的v-col

<v-row v-for="(rule, index) in ruleDetails" :key="index">
<v-col
    :class="{
        'md-4': rule.width == 'large',
        'md-3': rule.width == 'medium'
    }"
>
    
</v-col>
</v-row

还有rule.width = 'medium'现在。

它似乎没有任何效果。

我是不是忘了什么？

Answer 1

你可以把它做成数组。

<v-row v-for="(rule, index) in ruleDetails" :key="index">
  <v-col :class="[rule.width == 'large' && 'md-4', rule.width == 'medium' && 'md-3']">
    
  </v-col>
</v-row

这在Vue解析为:class="[false, 'md-3']的<foo class="md-3" />中得到解决

​

const rule = {
  width: 'medium'
}

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

​

Answer 2

您可以直接在md中而不是在类中使用<v-col>属性。要实现这一点，您可以在每个对象中应用另一个属性作为值和宽度。

演示(在完整页面中运行此代码段)

​

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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vuetify@2.x/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>

​