Question

我有这个计算属性：

 computed: {
            filteredCars: function() {
                var self = this
                return self.carros.filter(function(carro) {
                    return carro.nome.indexOf(self.busca) !== -1
                })
            },
        },

我正在使用v-for：

<tr v-for="carro in filteredCars">
    <td>{{carro.nome}}</td>
    <td>{{carro.marca}}</td>
    <td>{{carro.categoria}}</td>
    <td>{{carro.motor}}</td>
    <td>{{carro.cambio}}</td>
    <td>{{carro.preco}}</td>
 </tr>

但我需要创建另一个计算属性来限制我的数据量，我如何在同一个v-for中调用它？

我正在尝试使用 filteredCars +另一个过滤器，在这种情况下类似于来自vue 1.x的'limit'过滤器。我已经使用Vue 1.x做了一个例子，但我需要使用Vue 2.x。

Vue.filter('limit', function (value, amount) {
            return value.filter(function(val, index, arr){
                return index < amount;      
            });

<tr v-for="carro in carros | limit upperLimit>
...
</tr>

Answer 1

在计算属性中使用Array.prototype.slice（Array.prototype.splice也应该有效）。

data: {
    carros: [...],
    upperLimit: 30
},
computed: {
    filteredCars: function() {
        const arr = this.carros.filter(function(carro) {
            return carro.nome.indexOf(self.busca) !== -1
        });
        if (arr.length > this.upperLimit) {
            return arr.slice(0, this.upperLimit + 1);
        }
        return arr;
    },
}

VueJS：我如何在一个v-for中使用两个计算属性？

1 个答案: