I am looking to create a component that has the ability to accept different formulas for computing the last column. The component should use these formulas in Vuex getters to store the total state values passed to it.
Here are the specifications for the component I want to build: - Dynamic columns support ✓ - Ability to accept dynamic formulas X - Option to specify which columns to include in the formula X
Below you can find the code snippet of the component:
<template>
<div>
<h2 class="text-center">{{ title }}</h2>
<v-row>
<v-col v-for="(header, i) in headers" :key="i">
<div class="text-center">{{ header.text }}</div>
</v-col>
</v-row>
<v-row class="align-center" v-for="(item, i) in stateArr" :key="i">
<v-col v-for="(header, j) in headers" :key="j">
<div v-if="header.type == 'number'" class="text-center">
{{ i + 1 }}
</div>
<div v-if="header.type == 'input'">
<v-text-field
outlined
dense
hide-details="auto"
:value="item[header.value]"
@input="commit(i, header.value, $event)"
>
</v-text-field>
</div>
</v-col>
</v-row>
<v-row>
<v-col>
<h2 class="text-center">Total</h2>
</v-col>
<v-spacer></v-spacer>
<v-col>
<h2 class="text-center">0</h2>
</v-col>
</v-row>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
props: {
stateName: {
default: "",
},
headers: {
default: () => [],
},
title: {
default: "",
},
rows: {
default: 5,
},
},
mounted() {
for (let i = 0; i < this.rows; i++) {
this.addRow(this.stateName);
}
},
computed: {
...mapState({
stateArr(state) {
return state[this.stateName];
},
}),
},
methods: {
...mapMutations(["mutateArr", "addRow", "reduceRow"]),
commit(index, property, val) {
this.mutateArr({
name: this.stateName,
index: index,
property: property,
val: val,
});
},
},
};
</script>