Is there a way in Vue.js to dynamically assign the class 'adjust' based on the value of a computed property called "isTrueSet"? I keep encountering the following error message:
[Vue warn]: Property or method "itTrueSet" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Task> at src/components/Task.vue
<TaskList> at src/components/TaskList.vue
<TaskTracker> at src/components/TaskTracker.vue
<App> at src/App.vue
<Root>
The computed property "isTrueSet" exists within the component instance, so I'm puzzled as to why this error is appearing.
If anyone could provide insight into why this issue is occurring, I would greatly appreciate it.
Here is an excerpt from my single file component:
The template section:
src/components/Task.vue
<template>
<div
class="task-wrapper"
:style="style"
:class="[isTrueSet ? 'adjust' : '', editTask ? 'editTask' : '']"
>
<div class="left-task-content" :class="{ adjust: itTrueSet }">
<h1 class="task-height task-title">
{{ title }}
</h1>
<h2 class="task-date">{{ momentDate }}</h2>
</div>
<div class="right-task-content">
<font-awesome-icon
@click="toggleRemider"
class="fa-spacer"
icon="bell"
></font-awesome-icon>
<font-awesome-icon
@click="askToUpdateTask(id)"
class="fa-spacer"
icon="edit"
></font-awesome-icon>
<font-awesome-icon
@click="askToDeleteTask(id)"
class="fa-spacer"
icon="times-circle"
></font-awesome-icon>
</div>
</div>
</template>
The JavaScript section:
src/components/Task.vue
<script>
// JavaScript code here
</script>
A snippet from the parent component looks like this:
src/components/TaskList.vue
<template>
<!-- Template code goes here -->
</template>
<script>
// JavaScript logic here
</script>
<style scoped>
/* Styling information */
.padding-end:last-child {
padding-bottom: 10px;
}
</style>