I am facing a challenge. On the server, I have a list of technologies, and in my HTML file, I want to display them dynamically:
<div
v-for="(technology, index) in technologies"
:key="technology.id"
>
technology-card
v-if="index < currentlyTechnologies"
:technology="technology"
/>
</div>
<button
type="button"
@click="onToggleButtonClick"
>
{{ toggleButtonText }}
</button>
In my Vue.js logic, I have implemented the following solution:
data () {
return {
currentlyTechnologies: 6
}
},
computed: {
toggleButtonText (): string {
return this.currentlyTechnologies === this.technologies.length ? 'Show less' : 'Show more'
}
},
methods: {
onToggleButtonClick () {
const limitTechnologies = 6
this.currentlyTechnologies = this.currentlyTechnologies === limitTechnologies ? this.technologies.length : limitTechnologies
}
}
However, despite my efforts, all 18 elements are being rendered in the DOM. How can I ensure that only the visible elements are displayed on the page?