是否可以在v-for循环中使.slice()中的参数动态?

Question

作为参考，我使用laravel 8与刀片语法。

这行代码是我做的一个value组件的一部分:

<li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" 
v-if="comic.item_type === 'b' && comic.stock > 0" 
v-for="(comic, index) in [...list].slice(0, 20)">

.slice(0, 20)

我想让20是动态的。我使用V-for lop在页面上呈现项目，但我希望将呈现的项目限制为20个实例，直到单击"load more"按钮，所以计划是创建一个函数，每次单击该参数时将该参数增加20。

我是Vue的新手，所以如果有更好的方法，请告诉我!

我已经尝试将第二个参数设置为绑定类，但它只是(显然)抛出一个错误，因为它不应该这样使用。

Answer 1

试试下面的代码片段:

const app = Vue.createApp({
data() {
return {
list: [{"id": 1, "name": "aaa", "item_type": "b", "stock": 9, }, {"id": 2, "name": "bbb", "item_type": "b", "stock": 11, }, {"id": 3, "name": "ccc", "item_type": "b", "stock": 8, }, {"id": 4, "name": "ddd", "item_type": "b", "stock": 8, }, {"id": 5, "name": "eee", "item_type": "b", "stock": 8, }, {"id": 6, "name": "fff", "item_type": "a", "stock": 8, }, {"id": 7, "name": "ggg", "item_type": "b", "stock": 8, }],
nr: 2
}
},
computed: {
filteredComics() {
return [...this.list.filter(l => l.item_type === 'b' && l.stock > 0)]
},
comics() {
return this.filteredComics.slice(0, this.nr)
}
},
methods: {
loadMore() {
this.nr = this.nr + this.nr
}
}
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<ul>
<li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" v-for="(comic, index) in comics">
{{ comic.name }}
</li>
</ul>
<button @click="loadMore" v-if="nr < filteredComics.length">more</button>
</div>

Answer 2

我会选择计算列表变量(包含预过滤的实际列表)以及loadMoreTimes索引("load more"按钮被按了多少)，它提供了对过滤列表的简单访问，如下所示:

computed: {
filteredList() {
return this.list
.filter(comic => comic.item_type === 'b' && comic.stock > 0)
.slice(0, (this.loadMoreTimes + 1) * 20);
}
}

你可以简单地循环数组

<li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" 
v-for="(comic, index) in filteredList">

BTW:在同一元素中使用v-if和v-for是不明智的做法。