[英]Render Vue.js elements
I have one problem.我有一个问题。 In server i have technologies, and in my html file i want to render them:在服务器中我有技术,在我的 html 文件中我想呈现它们:
<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 code i do next:在我的 Vue.js 代码中,我接下来要做的是:
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
}
}
But in DOM i have all 18 element.但在 DOM 中,我拥有所有 18 个元素。 how can I draw only those elements that will be visible on the page?我怎样才能只绘制那些在页面上可见的元素? Thank you!谢谢!
If i properly understood what you want.如果我正确理解你想要什么。 I make computed property for technologies and change amoutOfTechnologiesToDisplay on click.我为技术创建计算属性并在单击时更改 amoutOfTechnologiesToDisplay。
<div
v-for="(technology, index) in technologies"
:key="technology.id"
>
<technology-card
:technology="technology"
/>
</div>
<button
type="button"
@click="onToggleButtonClick"
>
{{ toggleButtonText }}
</button>
and your.vue file和你的.vue 文件
data () {
return {
amoutOfTechnologiesToDisplay: 6,
technologiesFromServer: [
// arr of obj {}, {}, {}....
]
}
},
computed: {
toggleButtonText (): string {
return this.currentlyTechnologies === this.technologies.length ? 'Show less' : 'Show more'
},
technologies(): array {
return technologiesFromServer.slice(0, this.amoutOfTechnologiesToDisplay);
}
},
methods: {
onToggleButtonClick (): void {
const limitTechnologies = 6;
this.amoutOfTechnologiesToDisplay = this.amoutOfTechnologiesToDisplay < this.technologiesFromServer.length ? this.technologiesFromServer.length : limitTechonogies;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.