Получить количество элементов в слоте

Question

Рассмотрим следующий компонент Vue:

<template>

    <!-- Carousel -->
    <div class="carousel-container">

        <div ref="carousel" class="carousel">
            <slot></slot>
        </div>

    </div>

</template>

<script>

    export default {

        data() {
            return {
                items: this.$refs.carousel.querySelector('*')
            }
        },

        computed: {
            count: function () {
                return this.items.length;
            }
        },

        created () {
            console.log(this.count);
        }

    }

</script>

Выше не работает, и я думаю, это потому, что я пытаюсь сослаться на refs в объекте данных.

Я пытаюсь получить count элементов DOM в элементе .carousel. Как мне добиться этого?

Обновление

Проведя дальнейшие исследования, я обнаружил, что можно достичь так:

<script>

    export default {

        data() {
            return {
                items: []
            }
        },

        computed: {
            count: function () {
                return this.items.length;
            }
        },

        mounted () {
            this.items = this.$refs.carousel.children;
            console.log(this.count);
        }

    }

</script>

Однако , я не уверен, что это лучший способ добиться этого. Я ценю, что «лучшее» субъективно, но знает ли кто-нибудь о «лучшем» способе достижения этого?

Answer 1

Мы можем получить все элементы внутри класса .carousel, используя ниже

var matched = $(".carousel *");
var total elements = matched.length;

, если вам нужно только количество слотов, вы можете использовать ниже

var matched = $(".carousel slot");
var total elements = matched.length;