javascript - 在 vue.js 中引用 v-for 中的先前值

Question

我有一个用 vue.js 创建的网格，但在应用关键字过滤器后我很难为值获取正确的索引。

<tbody v-for="
      entry in data
    | filterBy filterKey
    | orderBy sortKey sortOrders[sortKey]">
        <tr v-if="$index == 0 || ($index > 0 && entry['value'] != data[$index-1]['value'])">
            <td class="Header" colspan="3">
                    VALUE: @{{{entry["value"]}}}
            </td>
        </tr>
 ...

在这种情况下，{{$index}} 给出 0、1、2、3 等。但是，当应用过滤器时，只有部分数据在屏幕上可见。 (即只有索引 6 和 8 处的条目)不幸的是，$index 仍然从 0 开始递增 1，因此无法引用前一个条目。引用上一个条目的正确方法是什么？

(我想检查条目的某个部分是否与上面的不同，如果是，则创建一个新标题。除了应用关键字过滤器时，我让它工作)

Answer 1

这是我说的jsfiddle

https://jsfiddle.net/sg4jtzzw/

它的要点是

添加了一个计算属性，它封装了对 this.data 的过滤和排序

computed:{
    special: function(){
        var key= this.filt;
        return this.data.filter(function(row){ 
            return row.indexOf(key)!= -1;   
        }).sort(); 
    }
}

在ready函数中，我们初始化了一个$watch来根据special的值更新prev

ready: function(){
  var self = this;
  self.prev= [];
  this.$watch('special',function(newVal, oldVal){
    self.prev = oldVal;  
  });
}

Html部分相当简洁紧凑

<div v-for="item in special">
  <span v-if=" previousList(item)== true"> Old </span>
  {{ item }}
 </div>

注意:filter()和sort()都是js函数，不是vue函数，区分大小写。如果我使用 vue 过滤器，代码会不那么冗长，但我不知道如何使用。由于不推荐使用内置过滤器，因此我也不建议使用它们

要了解有关过滤器的推荐方法，您可以阅读 discussion on github