Vuejs Conditional class using compute - vue.js

Question

I'm learning Vuejs and I can't see any documentation or examples on how to have conditional class, based on the record.
I have a conditional class with a variable 'taskClassComputed':
<div
v-bind:key="task.id"
v-for="task in currenttasks"
v-bind:class="taskClassComputed"
>
I then have a computed function to determine the class to use:
taskClassComputed: function () {
var classType = "task-openTile";
if (this.state === "CLOSED") {
classType = "task-closedTile";
} else if (this.state === "OPEN") {
if (this.fasttrack != "undefined") {
classType = "task-tile";
} else if (this.score >= 2000) {
classType = "task-fastTrackedTiles";
}
classType = "task-tile";
}
return classType;
},
But the function always returns the default value. Can someone point me to documentation on how I learn how to do this - or tell me where I'm going wrong.
Many thanks.
I've stipped down the page (still working) to show the code being used.
<template #updateParentTasks="updateTasks">
<div id="todo-app" class="relative overflow-hidden">
<div id="data-list-list-view">
<vs-table
#updateParentTasks="updateTasks"
ref="tasktable"
v-model="selected"
:data="currenttasks"
>
<div
v-bind:key="task.id"
v-for="task in currenttasks"
v-bind:class="taskClassComputed"
>
<div>
<div
id="task-card"
v-on="$listeners"
#updateParentTasks="updateTasks"
>
<div #updateParentTasks="updateTasks">
<vs-row vs-w="12">
<vs-col
class="shape"
vs-type="flex"
vs-lg="1"
vs-sm="1"
vs-xs="1"
>Testing</vs-col
>
</vs-row>
</div>
</div>
</div>
</div>
</vs-table>
</div>
</div>
</template>
<script>
import consts from "#/const.js";
function update_itemsbystate(src, itemstate) {
const dest = [];
let i = 0,
j = 0;
for (i = 0; i < src.length; i++) {
if (src[i].state === itemstate) {
/*eslint-disable-next-line*/
console.log(
"item " + itemstate + ":" + i + " " + j + JSON.stringify(src[i])
);
dest[j] = JSON.parse(JSON.stringify(src[i]));
j++;
}
}
return dest;
}
function parseByState(tasks, page) {
let result = "OPEN";
if (page.showDeleted === true) {
result = "DELETED";
} else if (page.showClosed === true) {
result = "CLOSED";
}
return update_itemsbystate(tasks, result);
}
import tasksidebar from "./TaskSidebar";
import QuickTaskPopup from "./QuickTaskPopup";
import { mapGetters } from "vuex";
import taskutils from "../../utils/taskutils";
export default {
name: "TaskList",
components: {
tasksidebar,
QuickTaskPopup,
// NewTaskPopup,
},
data() {
return {
selected: [],
// tasks: [],
currenttasks: [],
isMounted: false,
showOpen: true,
showClosed: false,
showDeleted: false,
// Filter Sidebar
isFilterSidebarActive: true,
clickNotClose: true,
// Data Sidebar
addNewDataSidebar: false,
sidebarData: {},
isPopupActive: false,
isNewPopupActive: false,
};
},
computed: {
...mapGetters(["alltasks"]),
currentPage() {
if (this.isMounted) {
return this.$refs.tasktable.currentx;
}
return 0;
},
queriedItems() {
return this.$refs.tasktable
? this.$refs.tasktable.queriedResults.length
: this.currenttasks.length;
},
windowWidth() {
return this.$store.state.windowWidth;
},
taskClassComputed: function () {
var classType = "task-openTile";
if (this.state === "CLOSED") {
classType = "task-closedTile";
} else if (this.state === "OPEN") {
if (this.fasttrack != "undefined") {
classType = "task-tile";
} else if (this.score >= 2000) {
classType = "task-fastTrackedTiles";
}
classType = "task-tile";
}
return classType;
},
},
mounted() {
this.isMounted = true;
},
methods: {
addNewData() {
this.sidebarData = {};
this.toggleDataSidebar(true);
},
updateTasks() {
console.log("updating tasks in task list");
this.currenttasks = parseByState(this.alltasks, this);
this.$forceUpdate();
},
openTasks() {
if (this.showOpen === false) {
this.showOpen = true;
this.showDeleted = false;
this.showClosed = false;
this.updateTasks();
}
},
closedTasks() {
if (this.showClosed === false) {
this.showOpen = false;
this.showDeleted = false;
this.showClosed = true;
this.updateTasks();
}
},
deletedTasks() {
if (this.showDeleted === false) {
this.showOpen = false;
this.showDeleted = true;
this.showClosed = false;
this.updateTasks();
}
},
editData(data) {
this.sidebarData = data;
this.toggleDataSidebar(true);
},
},
beforeMount() {
this.currenttasks = parseByState(this.alltasks, this);
console.log("pre-mount");
},
created() {
this.setSidebarWidth();
},
};
</script>
<style lang="scss">
.task-fastTrackedTile {
padding: 40 !important;
overflow: hidden;
border: 1px solid;
border-color: red;
background: rgba(184, 96, 96, 0.07);
border-left-width: 7px;
border-left-color: red;
margin-bottom: 5px;
border-radius: 0.5rem;
}
.task-closedTile {
padding: 40 !important;
// overflow: hidden;
border: 1px solid;
border-color: gray;
background: rgba(239, 239, 255, 0.07);
border-left-width: 7px;
border-left-color: gray;
margin-bottom: 5px;
border-radius: 0.5rem;
}
.task-openTile {
padding: 40 !important;
// overflow: hidden;
border: 1px solid;
border-color: rgba(203, 203, 218, 0.4);
border-left-width: 7px;
border-left-color: rgba(25, 25, 170, 0.4);
margin-bottom: 5px;
border-radius: 0.5rem;
}
.taskFasttrackProp {
// overflow: hidden;
// text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.7rem;
color: red;
margin-right: 15px;
}
.taskProp {
// overflow: hidden;
// text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.7rem;
color: blue;
margin-right: 15px;
}
</style>

Answer 1

you can set multiple classes to vue element by using:
<my-componenet :class="['class1', condition1 ? 'class2' : 'class3']" ..
// condition1 can be anything data, computed, prop, ...
also you can check doc for more details