[Vuejs]-Vue emit ref of another element on click

by

0👍

You can try something like this.

var classToCheck = 'myclass';

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

OR

myclickevent(event){

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

}

This contains all the classes for your element

this.$refs.nav.classList

0👍

i found the solution:

here is need to add **<some-component>** to ref attribute for accessing to ref inside jsx.

Then will possible to access to nav ref with: 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>

Leave a comment