I am currently developing a Table component using factory functions for all logic implementation. Within a v-for loop, I generate a cell for each item in every row.
The factory
Below are the actual factories that I import into the respective vue page where they are needed. Only the relevant code snippets have been included here.
const TableData = (data) => {
const methods = {
'getRows': () => {
const result = []
for(let i = 0, end = data.length; i < end; i++) {
result.push(TableRow(methods, i))
}
return result
}
}
return methods
}
const TableRow = (parent, rowIndex) => {
const methods = {
'getCells': () => {
const result = []
for(let colIndex = 0, end = parent.getColumnCount(); colIndex < end; colIndex++) {
result.push(TableCell(parent, rowIndex, colIndex))
}
return result
}
}
return methods
}
const TableCell = (parent, rowIndex, columnIndex) => {
let active = false
const methods = {
'hover': () => {
active = !active
},
'isActive': () => {
return active
}
}
return methods
}
The component
Following is the component structure:
<template>
<div class="table-container">
<table class="table" v-if="table">
<thead>
<tr>
<th class="index-col"></ths>
<th v-for="(col, index) in columns">{{col}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td class="cell" v-for="cell in row.getCells()" @mouseenter="cell.hover" @mouseleave="cell.hover" :class="{active: cell.isActive()}">{{cell.getValue()}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
/* Table Data Factory */
import TableData from "~/plugins/library/table/data_new.js";
export default {
data() {
return {
table: null
};
},
methods: {
async fetch() {
/* Fetching data from API - fetchedData is an array */
this.data = fetchedData
if(this.data) {
this.table = TableData(this.data)
} else {
console.error('No data available')
}
}
},
computed: {
columns() {
return this.table.getColumns()
},
rows() {
return this.table.getRows()
}
},
mounted() {
this.fetch()
}
};
</script>
My objective is to toggle the class when hovering over a cell in the table, changing its active state to true. However, the class property does not observe changes in the cell factory. I have tried various solutions and searched extensively but without success.
I appreciate any assistance or guidance on how to make the class reactive. Thank you in advance!