I am currently working with three primary Vue files:
index.vue.js:
<template>
<div class="tax-map-wrapper">
<h1>this is the page where the map renders</h1>
<Map/>
</div>
</template>
<script>
import Map from './components/Map.vue';
export default {
}
</script>
Map.vue:
<template>
<div>
<h1>MAP TESTER</h1>
</div>
</template>
<script>
console.log("map")
import Pagination from './Pagination.vue';
import { debounce } from '../helpers/util.js'
export default {
}
</script>
<style scoped></style>
Pagination.vue:
<template>
<div>
<h1>MAP TESTER</h1>
</div>
</template>
<script>
console.log("pagination")
export default {
}
</script>
<style scoped></style>
Upon loading my app, I can observe the "this is the page where the map renders" text on my browser, affirming that the index.vue file is functioning correctly and its template content is visible.
However, the Map component does not render, neither does the Pagination nested within the Map.vue template file. In the console, I can see the logs for both "map" and "pagination", indicating that these files are being accessed. Nevertheless, the associated templates for these files remain unrendered. No errors are displayed in the browser; it remains blank underneath the "this is the page where the map renders".
Here is my tax_map.js:
import Vue from 'vue';
import Map from '../tax_map/index.vue';
Vue.use(Map)
document.addEventListener('DOMContentLoaded', () => {
new Vue({
el: '#tax-map-wrapper',
render: h => h(Map)
})
This is my tax_map.html.erb:
<%= javascript_pack_tag 'tax_map' %>
<div id="tax-map-wrapper"></div>
If anyone has insights into why the components within index.vue are failing to render, your assistance would be greatly appreciated. Thank you!