Hello, I'm looking to retrieve an element by its class name or some other method. Specifically, I want to target an element with the class name "nav" when a menu item is clicked within my code. I've tried using refs but can't seem to get it working in this scenario.
For reference, here is the fiddle showcasing my issue: https://jsfiddle.net/cihanzengin/aq9Laaew/294154/
Below is the code snippet:
<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>