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

Question

[danilr]

Нужно чтобы часть пунктов скрывалась (постоянно показывалось 4, остальные разворачивались и сворачивались по нажатию кнопки). Как на картинке. Блоки и списки внутри выводятся через цикл v-for.

Comments

[danilr]

https://codepen.io/Danilzzz/pen/xodVaj
мой супер вариант

Answer 1

[nvdfxx]

для каждого box добавляете поле isOpen: false, при клике меняете на !isOpen, к этой штуке класс привязываете

Comments

[danilr]

А если данные с бэка приходят? Можно ли мне им новое свойство прописывать?
И мне нужно плавное появление, а не просто дисплей: ноне, дисплей блок.

[danilr]

Подсказка хорошая, спасибо)

Answer 2

[Secret73]

Еще только учусь
https://codesandbox.io/s/vue-template-6wys2

Comments

[danilr]

Очень неплохо

Answer 3

[0xD34F]

Вариант попроще - заворачиваем весь список в transition-group, у отдельных элементов списка анимируем высоту (должна быть задана).

И посложнее - режем список на две части, начало рендерим как обычно, а конец оборачиваем в отдельный элемент, у которого анимируем высоту.

Comments

[danilr]

Второй вариант хорош, но действительно сложный.

Answer 4

[Владимир]

Примерно так:

<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>

Answer 5

[Евгений]

Через css скрывать элементы у списка, начиная с 5. По нажатию по кнопке, можно добавить класс списку, который будет показывать все элементы

Comments

[danilr]

Как скрыть элементы, начиная с 5-го? Как добавить класс в этом цикле

<div v-for="box in boxies">
 <ul>
  <li v-for="item in items">
 </ul>
</div>

, чтобы открылось только у конкретного блока?