Vue.js 计算 json 值答案

【问题标题】：Vue.js counting json valueVue.js 计算 json 值
【发布时间】：2016-04-10 05:21:22
【问题描述】：

我有这个 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"
}
]
},

我的看法

 <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 循环内的主题失败，有什么方法可以解决这个问题？

【问题讨论】：

来自 JSON 的等级是一个字符串，那么计算等级到底是什么意思。而且你不应该在你使用它的地方使用 PHP 的 -> 操作符，因为 Blade 不会处理它，因为你用 @ 忽略了它。猜你在用 Laravel

标签： vue.js

【解决方案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。

【讨论】：