슬롯 내에서 요소 개수 가져오기

슬롯 내에서 요소 개수 가져오기

다음 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데이터 개체에서

나는 그것을 얻으려고 노력하고 있다.countDOM 요소의.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>

하지만, 나는 이것이 이것을 이루기 위한 최선의 방법이라고 확신하지 않는다.나는 '최고'가 주관적이라는 것은 감사하지만, 이것을 성취하기 위한 '더 나은' 방법에 대해 아는 사람이 있는가?

나는 태그에 있는 요소들을 세는 더 간단하고 간단한 방법이 다음과 같다고 생각한다.

<script>

    export default {

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

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

    }

</script>

우리는 아래를 이용하여 .carouzel 클래스안의 모든 요소들을 얻을 수 있다.

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

슬롯 개수만 필요한 경우 아래를 사용하십시오.

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

참조URL: https://stackoverflow.com/questions/56493855/get-element-count-from-within-a-slot