Vue.js 计数 json 值

Question

我有这个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"><a href="#" data-toggle="modal" data-target="#myModal" class="btn-view-more">View more info</a></div> </span></td>
        </tr>       
      </tbody>

F怎么算我使用 vue.resource this.$http.get 通过 API 调用收到了 json 值。我正在尝试这个 @{{ all_subjects.grade.grade->count() }} 它不起作用。我想在 vue.js 中计算 v-for 循环内的主题失败有什么解决方法？

Answer 1

您正在尝试调用您的代码中不存在的方法 count()。此外，您不能像在 PHP 中那样在 Javascript 中调用方法。所以你不能使用 -> 运算符来进行方法调用。

您可以在 Vue 虚拟机中添加一个新方法：

methods: {
        count: function(subject) {
            var grades = subject.grade.filter(function(grade) {
                return grade.grade === 'F';
            });
            return grades.length;
        }
    },

上面的代码使用 Javascript 的 filter() 方法。

然后在您的视图中调用该方法：

<ul>
    <li v-for="subject in all_subjects">
        Number of F's: {{ count(subject) }}
    </li>
</ul>

另请注意，在您的 v-for 中，您引用的是 subjects 而不是 all_subjects。

Vue.js 计数 json 值

Vue.js counting json value

vue.js