i'm using vuejs2. Try to hide the button before or after reach the amount of value, but i can't event get the data length to compare with limit. I try to re-assign it into an array, still not work cause the length is 1. Any idea how to do or different way to do that? Thanks
export default {
name: 'SlideEvents',
props: {
dataEvents: {
type: Array,
default () {
return []
}
}
},
data () {
return {
limit: 6
}
},
components: {
CardSlide
},
computed: {
dataFilter () {
if (this.dataEvents) {
return this.dataEvents.slice(0, this.limit)
} else {
return this.dataEvents
}
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div class="container-fluid more-top">
<div class="row">
<div class="col-md-12">
<div class="card box-simple border-0">
<h2>Agenda Terbaru</h2>
<div class="mt-5 mb-5">
<div class="row row-cols-1 row-cols-md-3 g-5 mt-2 px-4">
<CardSlide class="mb-4" v-for="each in dataFilter"
:key="each.id"
:content="each" />
</div>
<button @click="limit*=2">Show More</button>
</div>
</div>
</div>
</div>
</div>To hide your button, use the v-if directive.
<button v-if="dataFilter && dataFilter.length < dataEvents.length" @click="limit*=2">Show More</button>
This will only show the button if there are events, and the filtered events are less than the total.
You can also use the v-show directive.