As part of my college project, I am tasked with developing a Vue.js application for managing home automation. The backend system is a basic json server that stores data for each room, including time slots.
These time slots determine the status of specific elements in a room within a given timeframe (such as temperature).
To display each time slot for a particular element in a room, I am utilizing a v-data-table component. However, when it comes to representing the boolean values (true or false) as 'open' or 'closed' in the table, I encountered some unexpected issues.
When attempting to use the array map function to replace true/false with open/closed, the behavior was not as expected. The new array always displayed 'open' irrespective of the original value and the values in the json server also got updated to 'open' inexplicably.
Below is the code snippet for the data table:
<v-data-table
v-if="room"
:headers="headers"
:items="room.timeslots.filter(timeslot => {return timeslot.element == 'cur'}).map(timeslot => {if(timeslot.value) {timeslot.value='open'} else {timeslot.value='gesloten'} return timeslot;})"
:custom-sort="customSort"
hide-default-footer
class="elevation-1 ma-5"
>
<template v-slot:[`item.actions`]="{ item }">
<v-icon @click="deleteTimeslot(item.id)">mdi-delete</v-icon>
</template>
<template slot="no-data">
Voor dit element zijn er nog geen tijdssloten ingesteld.
</template>
</v-data-table>
Here's an example of sample data from the json server:
{
rooms: [
{
"id": 2,
"name": "Bureau",
// Other room details...
"timeslots": [
{
"id": 1,
"start": "12:00",
"end": "13:00",
"value": "21",
"element": "temp"
},
{
"id": 4,
"start": "03:20",
"end": "04:20",
"value": true,
"element": "cur"
},
{
"id": 5,
"start": "14:00",
"end": "15:00",
"value": false,
"element": "cur"
}
]
}
I would greatly appreciate if someone could shed light on this peculiar behavior and provide guidance on how to rectify it.