VueJS: How To Collapse Elements In A For Loop Separately? - vue.js

Question

I like to toggle the topic.text property. I want to collapse AND expand it alternately.
I have the following setup:
<template v-for="topic in $store.state.forum.topics">
<div class="topic">
<div class="date">{{ topic.user }}, {{ topic.date }}</div>
<span class="title">{{ topic.title }}</span>
<div class="text">{{ topic.text }}</div>
</div>
</template>

Answer 1

You could do something like:
<template v-for="topic in $store.state.forum.topics">
<div class="topic" #click="toggleCollapsation">
<div class="date">{{ topic.user }}, {{ topic.date }}</div>
<span class="title">{{ topic.title }}</span>
<div class="text" v-show="isCollapsed">{{ topic.text }}</div>
</div>
</template>
<script>
export default {
data() {
return {
isCollapsed: false
};
},
methods: {
toggleCollapsation() {
this.isCollapsed = !this.isCollapsed;
}
}
};
</script>
Instead of v-show you can also use v-if. The differences are (from the official docs):
v-if vs v-show
v-if is “real” conditional rendering because it ensures that event
listeners and child components inside the conditional block are
properly destroyed and re-created during toggles.
v-if is also lazy:
if the condition is false on initial render, it will not do anything -
the conditional block won’t be rendered until the condition becomes
true for the first time.
In comparison, v-show is much simpler - the
element is always rendered regardless of initial condition, with just
simple CSS-based toggling.
Generally speaking, v-if has higher toggle
costs while v-show has higher initial render costs. So prefer v-show
if you need to toggle something very often, and prefer v-if if the
condition is unlikely to change at runtime.
https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
I wouldn't read the topics directly from the $store global though. Assuming you're using VueX, I would use mapGetters in the parent view and feed the topic's component through props.
For added sugar you can take a look at Vue transitions: https://v2.vuejs.org/v2/guide/transitions.html