estoy usando vuejs2. Intente ocultar el botón antes o después de alcanzar la cantidad de valor, pero no puedo obtener la longitud de los datos para comparar con el límite. Intento reasignarlo a una matriz, pero aún no funciona porque la longitud es 1. ¿Alguna idea de cómo hacerlo o una forma diferente de hacerlo? Gracias
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>Para ocultar su botón, use la directiva v-if .
<button v-if="dataFilter && dataFilter.length < dataEvents.length" @click="limit*=2">Show More</button>Esto solo mostrará el botón si hay eventos y los eventos filtrados son menores que el total.
También puede usar la directiva v-show .