HOW TO CHANGE VALUE IN DATA-TABLE - vuejs2

Question

Hello how to changes this values in data table, true change to active or false in inactive
add my code in vue js and vuetify i like change value in row state, chage this value true change to active or false in inactive, i'm using axios to connect in api from csharp
next of code i'm add image of i want made it this
<template>
<v-data-table
:headers="headers"
:items="categories"
sort-by="Name"
class="elevation-1"
:search="search"
>
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>Categories</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
New Item
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="editedItem.namecategory"
label="Name"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="editedItem.descategory"
label="Description"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="editedItem.numberstatate"
label="State"
></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-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5"
>Are you sure you want to delete this item?</v-card-title
>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="closeDelete"
>Cancel</v-btn
>
<v-btn color="blue darken-1" text #click="deleteItemConfirm"
>OK</v-btn
>
<v-spacer></v-spacer>
</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)"> edit </v-icon>
<v-icon small #click="deleteItem(item)"> delete </v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" #click="initialize"> Reset </v-btn>
</template>
<script>
import axios from "axios";
export default {
data: () => ({
categories: [],
search: "",
dialog: false,
dialogDelete: false,
headers: [
{ text: "Actions", value: "actions", sortable: false},
{ text: "Name", value: "namecategory" },
{ text: "Description", value: "descategory", sortable: false },
{ text: "State", value: "numberstatate" , sortable: false},
],
desserts: [],
editedIndex: -1,
editedItem: {
name: "",
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
},
defaultItem: {
name: "",
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
},
}),
computed: {
formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item";
},
},
watch: {
dialog(val) {
val || this.close();
},
dialogDelete(val) {
val || this.closeDelete();
},
},
created() {
this.initialize();
this.tolist();
},
methods: {
tolist() {
let me = this;
axios
.get("api/categories/tolist/")
.then(function (response) {
me.categories = response.data;
//console.log(response)
})
.catch(function (error) {
console.log(error);
});
},
initialize() {
this.desserts = [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
},
{
name: "Cupcake",
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
},
{
name: "Gingerbread",
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
},
{
name: "Jelly bean",
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
},
{
name: "Lollipop",
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
},
{
name: "Honeycomb",
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
},
{
name: "Donut",
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
},
{
name: "KitKat",
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
},
];
},
editItem(item) {
this.editedIndex = this.desserts.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
},
deleteItem(item) {
this.editedIndex = this.desserts.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialogDelete = true;
},
deleteItemConfirm() {
this.desserts.splice(this.editedIndex, 1);
this.closeDelete();
},
close() {
this.dialog = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
closeDelete() {
this.dialogDelete = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
save() {
if (this.editedIndex > -1) {
Object.assign(this.desserts[this.editedIndex], this.editedItem);
} else {
this.desserts.push(this.editedItem);
}
this.close();
},
},
};
</script>
and my view is this
enter image description here

Answer 1

I have solved it in the following way, add next line after of data-table
<template v-slot:item.numberstatate="{ item }">
<span v-if="item.numberstatate" class="blue--text">Active</span>
<span v-else class="red--text">insactive</span>
</template
So that it is as follows:
<v-data-table
:headers="headers"
:items="categories"
sort-by="Name"
class="elevation-1"
:search="search"
>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" #click="editItem(item)"> edit </v-icon>
<v-icon small #click="deleteItem(item)"> delete </v-icon>
</template> ........