@OlegBagirov

Как оставлять открытым только один элемент из списка?

В родительском компоненте(App) выводится в цикле дочерний компонент(List) состоящий из заголовка и содержимого, при нажатии на заголовок производится показ/скрытие содержимого.
Как сделать что-бы в состоянии "развернут" мог быть только один компонент из всего списка? - когда нажимаем свернутый компонент - он разворачивается, а другой развернутый сворачивается?

5e2ac0892dcb8731923465.jpeg

/*LIST component*/
<template lang="pug">
    .list
       .header(@click="expand()") {{title}}        
       .text(v-show="isActive") {{content}}         
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
    props: {
        title: String,
        content: String
    }
}) 
export default class List extends Vue{
    private isActive = false
    private expand() {
        this.isActive =!this.isActive
    }
}
</script>


/*APP component*/
<template lang="pug">
  .app
    List(v-for="item in getList" :title="item.title" :content="item.content") 
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import List from './components/List.vue';
import { mapGetters } from 'vuex';

@Component ({  
  computed: mapGetters(['getList']),
  components: {
    List
  }
})
export default class App extends Vue {}
</script>
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
@Arge-dev
Front-end Developer
В родительском компоненте, заведи метод на тогл активности, в котором в дату запихни ключ нажатого элемента списка, за тем через условие которое будет сверять ключ из даты и ключ айтема, вешай нужный класс, так ты получишь вариант, при котором у тебя единожды будет открыт лишь один айтем.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
В таком случае управление "скрытием" должно происходит в родительском компоненте. Он должен слушать клики — разворачивать один и сворачивать все остальные дочерние компоненты.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы