Usng Vuetify v-data-table how to set chip color based and value and item - vuetify.js

Question

I would like to set the chip color for the value of an item in a v-data-table using both the items value and the items id. So i want to set values under 0.5 to red only if the id is "Cl2". ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
[enter image description here][1]
Here's my table and code:
[1]: https://i.stack.imgur.com/Sp8DQ.jpg
<template>
<v-data-table
:headers="headers"
:items="parameters"
class="elevation-1"
hide-default-footer
calculate-widths
dense
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Parameter Input {{ scanSite }} </v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" persistent>
<v-card
max-width="315px"
max-height="240px"
style="position: absolute; top: 90px; left: 30px; right: 30px;"
>
<v-card-title>
<span class="">{{ editedItem.name }} - Enter/Edit Values </span>
</v-card-title>
<v-card-text class="card-text py-0 my-0">
<v-container>
<v-row class="row py-0">
<v-col cols="5">
<v-text-field
v-model="editedItem.value"
label="Value"
></v-text-field>
</v-col>
<v-col cols="5">
<v-text-field
v-model="editedItem.sid"
label="Save ID"
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="close">Cancel</v-btn>
<v-btn color="blue darken-1" text #click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-icon small class="mr-2" #click="editItem(item)">
mdi-pencil
</v-icon>
<v-icon small class="mr-2" #click="addItem(item)">
mdi-plus
</v-icon>
</template>
<template v-slot:[`item.analyse`]="{ item }">
<v-simple-checkbox
color="green"
v-model="item.analyse"
></v-simple-checkbox>
</template>
<template v-slot:[`item.value`]="{ item }">
<v-chip :color="getColor(item.value)" small dark>{{ item.value }}</v-chip>
</template>
</v-data-table>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
scanSite: "",
dialog: false,
selected: [],
editedItem: {
name: "",
value: 0,
sid: 0
}
};
},
computed: {
...mapState(["scanSite", "headers", "parameters", "sites"])
},
methods: {
editItem(item) {
this.editedIndex = this.parameters.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
},
save() {
Object.assign(this.parameters[this.editedIndex], this.editedItem);
this.dialog = false;
},
close() {
this.dialog = false;
},
getColor(value, id) {
console.log(value, id);
if (value > 0.5 && id == "Cl2") return "red";
else if (value > 10) return "orange";
else return "green";
},
addItem(item) {
this.editedIndex = this.parameters.indexOf(item);
this.editedItem = Object.assign({}, item);
this.parameters.push(this.editedItem);
this.dialog = true;
}
}
};
</script>

Answer 1

I think you need to set both paramareters when you call your getColor() function, like so
<v-chip :color="getColor(item.value, item.id)" small dark>{{ item.value }}</v-chip>
or pass the whole item object and manage it in the getColor() function
<v-chip :color="getColor(item)" small dark>{{ item.value }}</v-chip>
...
getColor(item) {
if (item.value > 0.5 && item.id == "Cl2") return "red";
else if (item.value > 10) return "orange";
else return "green";
},