Estoy intentando implementar un botón para cargar más en mi código. Podría hacer esto en javascript pero no puedo encontrar una forma similar en vue.
Este es mi código de vue. Intenté preguntarle al elemento con la identificación de la empresa, pero no es reactivo, por lo que no puedo simplemente cambiar el estilo.
<main>
<ul>
<li v-for="company in companiesdb" :key="company.id" v-bind:id="company.id" ref="{{company.id}}" style="display: none">
{{company.name}}<br>
{{company.email}}
</li>
</ul>
</main>
Este es mi intento fallido de hacerlo en javascript, pero como mencioné antes, ref no es reactivo, así que no puedo hacerlo de esta manera
limitView: function (){
const step = 3;
do{
this.numberCompaniesVis ++;
let li = this.$refs[this.numberCompaniesVis];
li.style = "display: block";
}while (this.numberCompaniesVis % 3 != step)
}
------------------------------------
Simplemente use la propiedad calculada para crear un subconjunto de la matriz principal...
const vm = new Vue({
el: '#app',
data() {
return {
companies: [
{ id: 1, name: "Company A" },
{ id: 2, name: "Company B" },
{ id: 3, name: "Company C" },
{ id: 4, name: "Company D" },
{ id: 5, name: "Company E" },
{ id: 6, name: "Company F" },
{ id: 7, name: "Company G" },
{ id: 8, name: "Company H" },
{ id: 9, name: "Company I" },
{ id: 10, name: "Company J" },
],
companiesVisible: 3,
step: 3,
}
},
computed: {
visibleCompanies() {
return this.companies.slice(0, this.companiesVisible)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="company in visibleCompanies" :key="company.id" :id="company.id">
{{company.name}}
</li>
</ul>
<button @click="companiesVisible += step" v-if="companiesVisible < companies.length">Load more...</button>
</div>
Respondido
28 de marzo de 2021 a las 13:12
Mijal Levý
Mijal Levý
34,8k
7
7 insignias de oro
72
72 insignias de plata
88
88 bronce insignias
------------------------------------
Creo que la forma en que aborda este problema es un poco compleja. En su lugar, puede crear una variable calculada que cambiará el número de listas mostradas.
Aquí está el código
<template>
<div id="app">
<ul>
<li v-for="(company, index) in companiesLoaded" :key="index">
{{ company }}
</li>
</ul>
<button @click="loadMore">Load</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
companiesdb: [3, 4, 1, 4, 1, 2, 4, 4, 1],
length: 5,
};
},
methods: {
loadMore() {
if (this.length > this.companiesdb.length) return;
this.length = this.length + 3;
},
},
computed: {
companiesLoaded() {
return this.companiesdb.slice(0, this.length);
},
},
};
</script>
Entonces, en lugar de cargar la lista desde CompaniesDB, cree una función calculada queDevolveremos la nueva matriz basada en la variable CompaniesDB. Luego está la función loadMore que se ejecutará cada vez que el usuario haga clic en el botón. Esta función aumentará la longitud inicial, por lo que se mostrarán más listas.
Aquí está el ejemplo en vivo
1
Me sorprende lo fácil que fue. Gracias, me has ahorrado mucho tiempo.
- volver a cerrar
28/03/2021 a las 13:14
