Ok, this is not really a tree, but just something like a drop-down list. I got a little stuck - I don’t know how to make it so that when I click on a specific headline, only this heading will open, not all the headings on the page. I am sure that there is a more elegant way than to write another variable for each item, but so far this method has not been found. I really need help, thanks!

< script > import Support from '../components/Support' export default { name: 'Help', components: { Support }, data() { return { isActive: true, main_question: 'ОБЩИЕ ВОПРОСЫ', sub_question: 'Как быстро происходит обмен?', answer: 'Большинство обменов на нашем сервисе автоматические. Они происходят в течений 1-й минуты после оплаты заявки. В тех случаях когда обмен происходит в полу-автоматическом режиме (перед обменом Вы увидите предупреждение об этом: скорость выполнения заявки зависит от степени загруженности оператора и обычно составляет 2-20 минут.', show: true, small: true } }, methods: { changeStatus: function() { this.isActive = !this.isActive } } } < /script> 
 .trans_border_m_20 { padding-bottom: 20px; } .answers_bl { margin-top: 35px; .answer_item_title_main { font-family: "SFUIDisplay-Medium", sans-serif; font-size: 16px; color: $greyD3; display: flex; align-items: center; border-top: 1px solid $greyL; padding: 15px 0 12px 0px; cursor: pointer; } .answer_item_title_main.disabled { &:last-child { border-bottom: 1px solid $greyL; } } .answer_item_title_main.active { border-bottom: 1px solid $greyL; .ico_trigger { transform: rotate(180deg); transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease; } } .answer_item_main .answer_item:last-child .answer_item_title_minor.active+.answer_item_txt { border-bottom: none; } .ico_trigger { margin-right: 17px; display: inline-block; width: 16px; height: 16px; } .answer_item_title_minor.active+.answer_item_txt { border-bottom: 1px solid $greyL; } .answer_item { padding-left: 70px; .answer_item_title_minor, .trigger_symbol { color: $blueD; font-family: "SFUIDisplay-Medium", sans-serif; font-size: 16px; cursor: pointer; } .answer_item_title_minor { padding: 14px 0 11px 0px; display: block; border-bottom: 1px solid $greyL; } .answer_item { .answer_item_title_minor.disabled { &:last-child { border-bottom: none; } } } .answer_item_title_minor.active { border: none; .trigger_symbol { display: inline-block; vertical-align: middle; border: none; transform: rotate(90deg); transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease; } } .trigger_symbol { display: inline-block; margin-left: 8px; } .txt_container { font-family: "SFNS-display-thin", sans-serif; font-size: 14px; color: $greyD3; text-align: justify; padding: 12px 0 25px 0; } .txt_container.active { border-bottom: 1px solid $greyL; } } } 
 <template> <div> <div class="top_bl trans_border trans_border_m_20"> <h1 class="big_title">Помощь по работе с сервисом</h1> </div> <div class="answers_bl main_center_bl "> <div class="answer_item_main"> <div @click="show = !show" class="answer_item_title_main" v-on:click="changeStatus" v-bind:class="{ active: isActive }"><span class="ico_trigger"></span>{{main_question}}</div> <div v-if="show" class="answer_item"> <div @click="small = !small" class="answer_item_title_minor" v-on:click="changeStatus" v-bind:class="{ active: isActive }">{{sub_question}}<span class="trigger_symbol">></span></div> <div v-if="small" class="answer_item_txt"> <p class="txt_container">{{answer}}</p> </div> </div> <div v-if="show" class="answer_item"> <div @click="small = !small" class="answer_item_title_minor" v-on:click="changeStatus" v-bind:class="{ active: isActive }">{{sub_question}}<span class="trigger_symbol">></span></div> <div v-if="small" class="answer_item_txt"> <p class="txt_container">{{answer}}</p> </div> </div> <div v-if="show" class="answer_item"> <div @click="small = !small" class="answer_item_title_minor" v-on:click="changeStatus" v-bind:class="{ active: isActive }">{{sub_question}}<span class="trigger_symbol">></span></div> <div v-if="small" class="answer_item_txt"> <p class="txt_container">{{answer}}</p> </div> </div> </div> <div class="answer_item_main"> <div @click="show = !show" class="answer_item_title_main" v-on:click="changeStatus" v-bind:class="{ active: isActive }"><span class="ico_trigger"></span>{{main_question}}</div> <div v-if="show" class="answer_item"> <div @click="small = !small" class="answer_item_title_minor" v-on:click="changeStatus" v-bind:class="{ active: isActive }">{{sub_question}}<span class="trigger_symbol">></span></div> <div v-if="small" class="answer_item_txt"> <p class="txt_container">{{answer}}</p> </div> </div> </div> </div> </div> </template>

    1 answer 1

    I would answer v-for all the "answer_item" in order not to write such an amount of v-on: click and other things in the processing of each element, it is easier to write once and run a cycle, create a separate array of objects, and there it would be easier to uncover them for (item,index) , give each of the internal flag "show" objects, and change it using the same index in v-for .