Vue.js counting json value - vue.js

Question

I have this Json
all_subjects: [
{
id: 1,
subject_code: "COMP101",
description: "Knowledge Work Software & Presentation ",
name: "",
grade: [
{
id: 103,
subject_id: "1",
user_id: "17",
grade: "F",
reviewed: "0"
},
{
id: 104,
subject_id: "1",
user_id: "16",
grade: "F",
reviewed: "0"
}
]
},
my view
<tbody v-for="subject in subjects">
<tr>
<td>
<span> #{{ subject.subject_code }}</span>
</td>
<td>
<span> #{{ subject.description }} </span>
</td>
<td>
<span> #{{ subject.grade.grade->count() }} </span>
</td>
<td><span> <div class="btn btn-crimson btn-inline-block">View more info</div> </span></td>
</tr>
</tbody>
how do I count the that is F.
I received the json value using vue.resource this.$http.get throught API Call.
I'm trying this #{{ all_subjects.grade.grade->count() }} it doesn't work.
I wanted to count the subjects failure inside the v-for loop in vue.js what are the ways around this?

Answer 1

You are trying to call a method count() that doesn't exist in your code. Also, you can't call methods the same way in Javascript as you do in PHP. So you can't use the -> operator to make a method call.
You can add a new method in your Vue vm:
methods: {
count: function(subject) {
var grades = subject.grade.filter(function(grade) {
return grade.grade === 'F';
});
return grades.length;
}
},
The code above works by using Javascript's filter() method.
Then call that method in your view:
<ul>
<li v-for="subject in all_subjects">
Number of F's: {{ count(subject) }}
</li>
</ul>
Also note that in your v-for you are referencing subjects instead of all_subjects.