I'm building a web app using ASP.NET CORE as the backend and vue.js as the frontend. Using Vuetify's current CRUD Datatable UI Component (patible with Vue.js2) for a page called "Category", I've run into the problem of trying to change the Category's "State" column value (as in if the Category is "Active" or "Inactive") based on a condition. This is how the result of the Data Table looks like:
|---------------------|------------------|---------------------|------------------|
| Options | Name | Description | State |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Videogames | Electronic Device | true |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Tablets | Electronic Device | true |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Flat Screens | Electronic Device | false |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Laptop | Electronic Device | true |
|---------------------|------------------|---------------------|------------------|
What I would like to achieve is to set a condition where if the Category's State is true, then replace the value as "Active" with a blue text. Else it replaces the value as "Inactive" with red text.
|---------------------|------------------|---------------------|------------------|
| Options | Name | Description | State |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Videogames | Electronic Device | Active |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Tablets | Electronic Device | Active |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Flat Screens | Electronic Device | Inactive |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Laptop | Electronic Device | Active |
|---------------------|------------------|---------------------|------------------|
HTML:
<template>
<v-layout align-start>
<v-flex>
<v-data-table
:headers="headers"
:items="categories"
:search="search"
sort-by="name"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Categories</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<v-text-field class="text-xs-center" 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 }">
<v-btn color="primary" dark class="mb-2" v-on="on">New</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ 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="name" label="Name"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="description" label="Description"></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="guardar">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.options="{ 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>
</v-data-table>
</v-flex>
</v-layout>
JAVASCRIPT
<script>
import axios from 'axios'
export default {
data(){
return{
categories:[],
dialog: false,
headers: [
{ text: 'Options', value: 'options', sortable: false },
{ text: 'Name', value: 'name' },
{ text: 'Description', value: 'description', sortable: false },
{ text: 'State', value: 'state', sortable: false },
],
search: '',
editedIndex: -1,
id: '',
name: '',
description: '',
valid: 0,
validMessage: [],
}
},
puted: {
formTitle () {
return this.editedIndex === -1 ? 'New Category' : 'Edit Category'
},
},
watch: {
dialog (val) {
val || this.close()
},
},
created () {
this.list();
},
methods:{
list(){
let me=this;
axios.get("api/Categories/List").then(function(response){
me.categories=response.data;
}).catch(function(error){
console.log(error);
});
},
editItem (item) {
this.id=item.idcategory;
this.name=item.name;
this.description=item.descrition;
this.editedIndex=1;
this.dialog = true
},
deleteItem (item) {
const index = this.desserts.indexOf(item)
confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1)
},
close () {
this.dialog = false;
this.limpiar();
},
clean() {
this.id = "";
this.name = "";
this.description = "";
this.editedIndex = -1;
},
guardar () {
if (this.validate()){
return;
}
if (this.editedIndex > -1) {
let me=this;
axios.put('api/Categorias/Edit', {
'idcategory': me.id,
'name': me.nombre,
'description': me.description
}).then(function(response){
me.close();
me.list();
me.clean();
}).catch(function(error){
console.log(error);
})
} else {
let me=this;
axios.post('api/Categories/Create', {
'name': me.name,
'description': me.description
}).then(function(response){
me.close();
me.list();
me.clean();
}).catch(function(error){
console.log(error);
})
}
},
validate () {
this.valid=0;
this.validMessage=[];
if(this.name.length < 3 || this.name.length > 50){
this.validMessage.push("The name should be in between 3 and 50 characters.")
}
if(this.valid.length){
this.valid=1;
}
return this.valid;
},
}
}
Any suggestion will be appreciated!
I'm building a web app using ASP.NET CORE as the backend and vue.js as the frontend. Using Vuetify's current CRUD Datatable UI Component (patible with Vue.js2) for a page called "Category", I've run into the problem of trying to change the Category's "State" column value (as in if the Category is "Active" or "Inactive") based on a condition. This is how the result of the Data Table looks like:
|---------------------|------------------|---------------------|------------------|
| Options | Name | Description | State |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Videogames | Electronic Device | true |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Tablets | Electronic Device | true |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Flat Screens | Electronic Device | false |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Laptop | Electronic Device | true |
|---------------------|------------------|---------------------|------------------|
What I would like to achieve is to set a condition where if the Category's State is true, then replace the value as "Active" with a blue text. Else it replaces the value as "Inactive" with red text.
|---------------------|------------------|---------------------|------------------|
| Options | Name | Description | State |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Videogames | Electronic Device | Active |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Tablets | Electronic Device | Active |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Flat Screens | Electronic Device | Inactive |
|---------------------|------------------|---------------------|------------------|
| Edit / Delete | Laptop | Electronic Device | Active |
|---------------------|------------------|---------------------|------------------|
HTML:
<template>
<v-layout align-start>
<v-flex>
<v-data-table
:headers="headers"
:items="categories"
:search="search"
sort-by="name"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Categories</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<v-text-field class="text-xs-center" 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 }">
<v-btn color="primary" dark class="mb-2" v-on="on">New</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ 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="name" label="Name"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="description" label="Description"></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="guardar">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.options="{ 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>
</v-data-table>
</v-flex>
</v-layout>
JAVASCRIPT
<script>
import axios from 'axios'
export default {
data(){
return{
categories:[],
dialog: false,
headers: [
{ text: 'Options', value: 'options', sortable: false },
{ text: 'Name', value: 'name' },
{ text: 'Description', value: 'description', sortable: false },
{ text: 'State', value: 'state', sortable: false },
],
search: '',
editedIndex: -1,
id: '',
name: '',
description: '',
valid: 0,
validMessage: [],
}
},
puted: {
formTitle () {
return this.editedIndex === -1 ? 'New Category' : 'Edit Category'
},
},
watch: {
dialog (val) {
val || this.close()
},
},
created () {
this.list();
},
methods:{
list(){
let me=this;
axios.get("api/Categories/List").then(function(response){
me.categories=response.data;
}).catch(function(error){
console.log(error);
});
},
editItem (item) {
this.id=item.idcategory;
this.name=item.name;
this.description=item.descrition;
this.editedIndex=1;
this.dialog = true
},
deleteItem (item) {
const index = this.desserts.indexOf(item)
confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1)
},
close () {
this.dialog = false;
this.limpiar();
},
clean() {
this.id = "";
this.name = "";
this.description = "";
this.editedIndex = -1;
},
guardar () {
if (this.validate()){
return;
}
if (this.editedIndex > -1) {
let me=this;
axios.put('api/Categorias/Edit', {
'idcategory': me.id,
'name': me.nombre,
'description': me.description
}).then(function(response){
me.close();
me.list();
me.clean();
}).catch(function(error){
console.log(error);
})
} else {
let me=this;
axios.post('api/Categories/Create', {
'name': me.name,
'description': me.description
}).then(function(response){
me.close();
me.list();
me.clean();
}).catch(function(error){
console.log(error);
})
}
},
validate () {
this.valid=0;
this.validMessage=[];
if(this.name.length < 3 || this.name.length > 50){
this.validMessage.push("The name should be in between 3 and 50 characters.")
}
if(this.valid.length){
this.valid=1;
}
return this.valid;
},
}
}
Any suggestion will be appreciated!
Share Improve this question asked May 3, 2020 at 3:42 DigitalDevGuyDigitalDevGuy 835 silver badges14 bronze badges 1- Does this answer your question? How to format Vuetify data table date column? – Boussadjra Brahim Commented May 3, 2020 at 3:59
2 Answers
Reset to default 2Using the item.state slot you can achieve this:
<template v-slot:item.state="{ item }">
{{item.state? ... : ...}}
</template>
sounds like all you need is a dynamic class on the location where the color changes:
:class="active? 'text--primary' : 'text--red'" .
https://v15.vuetifyjs./en/framework/colors