Question

我有这个过滤器：

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

我使用的是这样的：

<div v-for="movimiento in movimientos | limit 7" class="c-movimientos-tabla__block">

如何在点击任何按钮时更改限制数量？

Answer 1

向您的Vue实例添加squeeze属性，最初设置upperLimit：

然后，创建一个计算属性data() { return { upperLimit: 7, } }，这是filteredMovimientos初始movimientos过滤器，传递新limit数据属性的值：

upperLimit

然后，在您的模板中，引用computed: { filteredMovimientos() { return Vue.filter('limit')(this.movimientos, this.upperLimit); } }循环中的filteredMovimientos，然后添加一个点击处理程序来更新v-for数据属性的值：

upperLimit

或者，您仍然可以在<div v-for="movimiento in filteredMovimientos" @click="upperLimit = 10">中指定过滤器，并将v-for作为参数传递：

upperLimit

注意：在Vue v2中不支持对<div v-for="movimiento in movimientos | limit upperLimit" @click="upperLimit = 10">进行过滤，因此如果您想将代码迁移到该版本，则需要使用计算属性。

VueJS：点击时调用自定义过滤器

1 个答案: