Below is a simplified version of the code I am working with:
<html>
<head>
<script src="file:///D:/OtherWork/javascript/vue/vue.js"></script>
</head>
<body>
<div id="app">
<Dial style="width: 120px; height: 120px;" v-model="src_value"></Dial>
</div>
<script>
Vue.component('Dial', {
template: '<canvas ref="dial_canvas"></canvas>',
data: function () {
return {
value: 0,
centre: { x: 0, y: 0 },
canvas: null
}
},
props: ['value'],
mounted: function() {
console.log(this.$refs.dial_canvas);
},
render: function() {
// To be implemented.
}
});
var app = new Vue({
el: '#app',
data: {
src_value: -1
},
created() {
}
});
</script>
</body>
</html>
Upon running this code and checking the console log, this.$refs.dial_canvas appears to be undefined.
I have gone through several related questions. One question and another question both suggest that attempting to access $refs (or $el) within created() instead of mounted() could be the issue, but that doesn't seem to be the case here.
I have come across multiple articles discussing the use of references in components, however, they all involve ".vue" files and utilize complex syntax for component imports - which doesn't align with my goal. It seems like they rely on server-side processes that I want to avoid. My aim is to keep the web server setup as straightforward as possible, solely serving plain text files.
In order to make my component reusable and display distinct values, how can I access the refs in my component while keeping it simple?
P.s. Prior to some modifications, $el also used to reference the <canvas> element, yet now it too returns as undefined.