I am working with a v-simple-table.
The "TotalAverage" value represents the total average of "ggFinalgrade".
How can I retrieve this value?
The initial value is 20
calculated as (30+20+10)/3=20
The second value is 25
found by (30+20)/2=25
My code snippet:
<template><div><v-card tile>
<v-card-title>{{ fixed.CardTitle }}</v-card-title>
<v-simple-table><thead><tr>
<th class="text-left" width="25%">{{ fixed.CourseSectionsName }}</th>
<th class="text-left" width="35%">{{ fixed.GradeItemsItemname }}</th>
<th class="text-center" width="10%">{{ fixed.QuizAttemptsTimefinish }}</th>
<th class="text-center" width="10%">{{ fixed.QuestionAttemptsResponsesummary }}</th>
<th class="text-center" width="10%">{{ fixed.GradeGradesFinalgrade }}</th>
<th class="text-center" width="10%">{{ fixed.TotalAverage }}</th>
</tr></thead><tbody>
<tr v-for="grade in grades" :key="grade.name">
<td class="text-left ">
{{ grade.csName }}</td>
<td class="text-lefe">
<div class="my-3" v-for="group in grade.group" :key="group.name">
<a :href="group.url" style="text-decoration:none">
{{ group.giItemname }}</a></div></td>
<td class="text-center">
<div class="my-3" v-for="qzaTimefinish in grade.qzaTimefinish" :key="qzaTimefinish.name">
{{ qzaTimefinish }}</div></td>
<td class="text-center">
<div class="my-3" v-for="qaResponsesummary in grade.qaResponsesummary" :key="qaResponsesummary.name">
{{ qaResponsesummary }}</div></td>
<td class="text-center">
<div class="my-3 text-center" v-for="group in grade.group" :key="group.name">
{{ group.ggFinalgrade }}</div></td>
<td class="text-center">{{ TotalAverage }}</td>
</tr></tbody>
</v-simple-table></v-card></div></template>
<script>
export default { data() { return {
fixed: {
CardTitle: "Course 1",
CourseSectionsName: "Content",
GradeItemsItemname: "Quiz Paper",
QuizAttemptsTimefinish: "Date",
QuestionAttemptsResponsesummary: "Instructor",
GradeGradesFinalgrade: "Outcome",
TotalAverage: "Overall Average"
},
grades: [
{
csName: "Content 1",
group: [{
giItemname: "Quiz 1-1",url: "",ggFinalgrade: 30},
{
giItemname: "Quiz 1-2",url: "",ggFinalgrade: 20},
{
giItemname: "Quiz 1-3",url: "",ggFinalgrade: 10}],
qzaTimefinish: ["0913", "0913", "1415"],
qaResponsesummary: ["Instructor 1", "Instructor 3", "Instructor 4"]},
{
csName: "Content 2",
group: [{
giItemname: "Quiz 2-1",url: "",ggFinalgrade: 30},
{
giItemname: "Quiz 2-2",url: "",ggFinalgrade: 20}],
qzaTimefinish: ["0913", "1415"],
qaResponsesummary: ["Instructor 1", "Instructor 2"]
}]};}};</script>