Vue.Js , how use dynamic color with class in a v-for-CodePudding

I'm stuck on something very simple probably for VueJS pros.

I have in my data, JSON objects with an attribute that can take the values, 10, 20, 30, 40. Depending on this value, I want the color of a v-btn to be different.

I tried several methods but each time I got an error

This :

<v-btn
     
    :
>

and getColor is defined in method.

getColor: function(type)
        {
          return this.color[type]
        }

I tried this :

 <v-btn
     
    v-bind:class= "[item.type == '10' ?  color['10'] : color['20'] ]"
>

And that work, but it's always color['20']

Why my condition is not working ?

My v-for above :

<v-card
        v-for="incident in incidents"
        :key="incident"
         
      >

CodePudding user response：

If I understood you correctly try like in following snippet:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      incidents: [{type: 10, name: 'aaa'}, {type: 40, name: 'bbb'}, {type: 30, name: 'ccc'}],
      colors: [{id: 10, color: 'purple'}, {id: 20, color: 'blue'}, {id: 30, color: 'green'}, {id: 40, color: 'red'}]
    }
  },
  methods: {
    getColor(id) {
      return this.colors.find(c => c.id === id)?.color || ''
    }
  }
})

.blue {
  background-color: blue;
}
.purple {
  background-color: purple;
}
.green {
  background-color: green;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-card
          v-for="(incident, i) in incidents"
          :key="i"
           
        >
          <v-btn
             
            :class= "getColor(incident.type)"
          >
            {{ incident.name }}
          </v-btn>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</div>

<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>

CodePudding user response：

Your code is looks good, Only one thing I notice is that you have to use !important in the styles to override the default style of v-btn.

Working Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [{type: 10}, {type: 40}, {type: 30}],
      color: {
        10: 'purple',
        40: 'blue',
        30: 'green'
      }
    }
  },
  methods: {
    getColor(type) {
      return this.color[type]
    }
  }
})

.blue {
  background-color: blue !important;
}
.purple {
  background-color: purple !important;
}
.green {
  background-color: green !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<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>
<div id="app">
  <div v-for="(item, index) in items" :key="index">
    <v-btn v-bind:>
     {{ getColor(item.type) }}
    </v-btn>
    <br><br>
  </div>
</div>