In my current project where I am developing a web application using ASP.NET CORE for the backend and vue.js for the frontend, I encountered an issue with Vuetify's CRUD Datatable UI Component in a page named "Category". The problem arises when trying to dynamically change the value of the Category's "State" column (either "Active" or "Inactive") based on a certain condition. Here is how the Data Table currently looks:
|---------------------|------------------|---------------------|------------------|
| 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 |
|---------------------|------------------|---------------------|------------------|
My goal is to implement a conditional logic where if the Category's State is true, it should be displayed as "Active" in blue text; otherwise, it should be shown as "Inactive" in 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"
...
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: [],
}
},
...
If you have any suggestions or solutions, feel free to share them! Your input is greatly appreciated.