Currently, I am utilizing vue-router within a single HTML file instead of using separate file components. I am encountering an issue where I am unsure how to pass the data stored in the Vue data object to the component when loading it for a route.
Oddly enough, everything functions as expected when I load the component without Vue-router. However, when I attempt to make the route load the component, it ceases to work properly.
const searchResults = Vue.component('search-results', {
props: [
'results',
'page',
'totalPages',
'resultsContainerHeight'
],
template:
<div>
<div style="height: 30px;"></div>
<div id="results-container" v-bind:style="{ minHeight: resultsContainerHeight + 'px' }">
<div class="card border-dark mb-3" v-for="result in results">
<div class="card-body text-dark">
<span class="float-right">{{Number(result.distance).toFixed(1)}} kms</span>
<h5 class="card-title">{{result.name}}</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<nav v-if="totalPages > 1">
<ul class="pagination justify-content-center">
<li class="page-item" v-bind:class="{disabled: page == 1}">
<a class="page-link" href="#" @click="$emit('change-page',page-1)">Previous</a>
</li>
<li class="page-item" v-bind:class="{active: index+1 == page}" v-for="(pageNo,index) in totalPages"><a class="page-link" @click="$emit('change-page',index+1)" href="#">{{index + 1}}</a></li>
<li class="page-item" v-bind:class="{disabled: page == totalPages}">
<a class="page-link" href="#" @click="$emit('change-page',page+1)">Next</a>
</li>
</ul>
</nav>
</div>
});
const router = new VueRouter({
routes: [{
path: "/",
component: searchResults,
props: {
results,
page,
totalPages,
resultsContainerHeight
}
}
]
});
var app = new Vue({
router,
el: '#app',
data: {
results: [],
latLng: '',
page: 1,
totalPages: '',
resultsContainerHeight: ''
}
I am currently receiving the error:
Uncaught ReferenceError: results is not defined
My goal is for the route to function in the same manner as it does when I load the component without using the router.