@danilr

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

Нужно чтобы часть пунктов скрывалась (постоянно показывалось 4, остальные разворачивались и сворачивались по нажатию кнопки). Как на картинке. Блоки и списки внутри выводятся через цикл v-for.
5d08b19149bf6850407761.png
  • Вопрос задан
  • 414 просмотров
Решения вопроса 4
@nvdfxx
Senior Pomidor developer
для каждого box добавляете поле isOpen: false, при клике меняете на !isOpen, к этой штуке класс привязываете
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
Вариант попроще - заворачиваем весь список в transition-group, у отдельных элементов списка анимируем высоту (должна быть задана).

И посложнее - режем список на две части, начало рендерим как обычно, а конец оборачиваем в отдельный элемент, у которого анимируем высоту.
Ответ написан
drop9dead
@drop9dead
Примерно так:
<div id="app">
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
        <button @click="changeCount" v-if="showButton">{{ buttonText }}</button> 
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                showItemCount: 4,
                isOpen: false,
                array: [
                    'Первый', 'Второй', 'Третий', 'Четвертый', 'Пятый', 'Шестой', 'Седьмой'
                ]
            },
            computed: {
                list() {
                    return this.array.slice(0, this.showItemCount)
                },
                showButton() {
                    return this.array.length > 4
                },
                buttonText() {
                    return this.isOpen ? 'Скрыть' : 'Подробнее'
                }
            },
            methods: {
                changeCount() {
                    if(this.isOpen) {
                        this.showItemCount = 4
                    } else {
                        this.showItemCount = this.array.length
                    }
                    this.isOpen = !this.isOpen
                }
            }
        })
    </script>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
iamd503
@iamd503
Верстальщик
Через css скрывать элементы у списка, начиная с 5. По нажатию по кнопке, можно добавить класс списку, который будет показывать все элементы
Ответ написан
Ваш ответ на вопрос

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

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