Vue испустить ref другого элемента по клику

Question

Здравствуйте, как я могу получить элемент по className или что-то еще.Так что мне нужно получить элемент по className, но я не могу понять, как это сделать в этом случае:

вот моя скрипка: https://jsfiddle.net/cihanzengin/aq9Laaew/294154/ Просто я хочу сделать это:меню в методе я пытаюсь получить элемент, который имеет имя класса nav.Я пытался сделать с ref, но я не могу

вот мой код:

<div id="app">
        <some-component  @get-element="getElement"></some-component>
    </div>

    <script>
        var someComponent = Vue.component("some-component", {
        template: `
            <div class="columns mobile-navigation">
            <div class="column drawer">
                <a class="is" @click="$emit('get-element')">MENU</a>
            </div>
            <div ref="nav" class="column mobile-nav-wrapper">
                <p> Some Text </p>
            </div>
            </div>
        `
        });

        var app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            "mobile-nav": mobileNav
        },
        methods: {
            getElement() {
            console.log(this.$refs.nav);
            }
        }
        });
    </script>

Answer 1

Я нашел решение:

здесь необходимо добавить **<some-component>** к атрибуту ref для доступа к ref внутри jsx.

Тогда можно будет получить доступ к ссылке с помощью: this.$refs.someRef.$refs.nav

<div id="app">
        <some-component  @get-element="getElement" ref="someRef"></some-component>
    </div>

    <script>
        var someComponent = Vue.component("some-component", {
        template: `
            <div class="columns mobile-navigation">
            <div class="column drawer">
                <a class="is" @click="$emit('get-element')">MENU</a>
            </div>
            <div ref="nav" class="column mobile-nav-wrapper">
                <p> Some Text </p>
            </div>
            </div>
        `
        });

        var app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            "mobile-nav": mobileNav
        },
        methods: {
            getElement() {
            console.log(this.$refs.someRef.$refs.nav);
            }
        }
        });
    </script>

Answer 2

Вы можете попробовать что-то вроде этого.

var classToCheck = 'myclass';

if( this.$refs.nav.classList.includes(classToCheck) ){
 // includes above class
}

ИЛИ

myclickevent(event){

    event.target.classList // this will get you classList of of clicked element then you can compare

}

Содержит все классы для вашего элемента

this.$refs.nav.classList