I am trying to access a ref that is defined within a template, when an element is clicked. Here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<site-nav></site-nav>
</div>
<script src="js/vjs.js"></script>
</body>
</html>
And here is my Vue code
var siteNav = Vue.component("site-nav", {
template: `<div v-on:click="testMethod">Click me</div>
<div ref="testref"></div>`,
methods: {
testMethod: function(event) {
console.log(self.$refs);
},
},
});
var app = new Vue({
el: "#app",
});
When clicking the "Click me" element, the console logs show that the $refs of the component element are inaccessible. I think this might be occurring because of a scope issue, or because the methods aren't seeing the refs before they get rendered.
What's going on here? I know I'm missing something simple. Thanks!
