Question

我有一个使用Vue.js绑定到数据的表。对于每个玩家，创建一行（TR）。对于播放器中的每个报告，创建一个单元格（TD）。这工作正常，但我想在当前报告ID的最后一个单元格中添加一个类。

因此...

<tr>
    <td></td>                     //rptID = 1
    <td></td>                     //rptID = 1
    <td></td>                     //rptID = 1
    <td class="lastOfRptID"></td> //rptID = 1
    <td></td>                     //rptID = 2
    <td class="lastOfRptID"></td> //rptID = 2
</tr>

这是我的示例代码：

var objArr = [
    {
        playerID: 1,
        rpts: [
            {rptID: 1,score: 1},
            {rptID: 1,score: 2},
            {rptID: 1,score: 3},
            {rptID: 1,score: 4},
            {rptID: 2,score: 1},
            {rptID: 2,score: 2}
        ]
    },
    {
        playerID: 2,
        rpts: [
            {rptID: 1,score: 5},
            {rptID: 1,score: 6},
            {rptID: 1,score: 7},
            {rptID: 1,score: 8},
            {rptID: 2,score: 3},
            {rptID: 2,score: 4}
        ]
     }
];
var vue = new Vue({
    el: '#rpts',
    data: {
        title: 'reports',
        reports: objArr
    }
});

table {
    width:99%;
    height:20px;
}
td {
    border:1px solid #000;
    border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<table id="rpts">
    <tr v-repeat="reports">
        <td v-repeat="rpts | orderBy 'rptID'">{{score}}</td>
    </tr>
</table>

谢谢！

Answer 1

我首先通过运行每个rpts来预处理数据，如果它是该报告的最后一个（使用lodash的示例代码），则向该行添加一个标志：

_.forEach(objArr, function (obj, index) {
    var previousRpt = null;
    _.forEach(obj.rpts, function (rpt, index) {
        if (previousRpt == null || previousRpt.rptId == rpt.rptId) {
            previousRpt.last = false;
        }
        rpt.last = true;
        previousRpt = rpt;
    });
});

并使用这样的新值：

<table id="rpts">
    <tr v-repeat="reports">
        <td v-repeat="rpts | orderBy 'rptID'"
            v-class="lastOfRptID: last">{{score}}</td>
    </tr>
</table>

使用Vue.js和v-repeat

1 个答案: