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

我认为一种更简单，更直接的方法来计算标记中的元素会更像这样：

<script>

    export default {

        data() {
            return {
                count: 0
            }
        },

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

    }

</script>

Answer 2

我们可以使用以下内容获取.carousel类中的所有元素

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

如果仅需要插槽计数，则可以在下面使用

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

从插槽中获取元素计数

更新

2 个答案: