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(); 
    }
}

在就绪功能中，我们根据$watch

的值初始化prev以更新special

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

Answer 2

我找到了一个使用自定义过滤器来填充可以利用新索引的过滤数组的解决方案：

为过滤的数据添加另一个道具：

    data: Array,
    dataFiltered: Array,

然后添加一个不会实际过滤任何内容的自定义过滤器，但会存储已过滤的数组：

    Vue.filter('populateFilteredData', function (filteredArray, input) {
        this.dataFiltered = filteredArray;
        return filteredArray;
    });

确保使用此过滤器 AFTER 所有其他过滤器和排序：

 <tbody v-for="
      entry in data
    | filterBy filterKey
    | orderBy sortKey sortOrders[sortKey]
    | populateFilteredData
     ">

然后，过滤后的数组可用于访问v-for循环的先前迭代中的信息，如下所示：

{{{ dataFiltered[$index-1] }}}

这花了很长时间才弄清楚，而且非常违反直觉。如果有人知道一个更好的方法（仍然简洁而简单）来完成同样的事情，请发表你的答案！

Answer 3

以为我会提到这个，以防它可以帮助任何人。不要忘记只是专门引用你通过索引迭代的数组并在if语句中手动获取值而不是编写设计的循环方法的能力。例如：

<div class="schedule-data-container" :class="{roundShift: i==0 || schedules[i-(i>1 ? 1 : 0)].round < s.round}" v-for="(s,i) in schedules" :key="i">
    <div class="roundNumber" v-if="i==0 || schedules[i-(i>1 ? 1 : 0)].round < s.round">
        Round {{ s.round }}
    </div>
</div>

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

3 个答案: