I have a local JSON file that contains all my content. With the help of VueResources and VueRouter, I am trying to create a list component to display items from this local JSON file. The goal is to show the content of a clicked item on another page using $route.params.
Below is my list component called Objects.vue
<template>
<div id="objects">
<router-link :to="'/' + this.lists.id"><div v-for="(item, index) in lists" class="list">{{ item.title }} {{ item.id }}</div></router-link>
</div>
</template>
<script>
//import json from './../assets/data.json'
export default {
name: 'Objects',
data() {
return {
lists: [],
};
},
methods: {
getObjects() {
this.$http.get('/static/data.json')
.then((response) => {
console.log(response.body);
this.lists = response.body.objects;
})
}
},
mounted() {
this.getObjects();
console.log(this.lists.id);
}
};
</script>
<style scoped>
</style>
Here is my item component named Object.vue
<template>
<div id="object">
<div>
{{ object.id }}
</div>
<div>
{{ object.title }}
</div>
</div>
</template>
<script>
import json from './../assets/data.json'
export default {
name: 'Object',
data() {
return {
id: this.$route.params.id,
object: {},
};
},
methods: {
getObjects() {
this.$http.get('/static/data.json/' + this.id)
.then((response) => {
console.log(response);
this.object = response.body.objects;
})
}
},
mounted() {
this.getObjects();
}
};
</script>
And this is what my json file looks like:
{
"objects": [
{
"id": 0,
"title": "a"
},
{
"id": 1,
"title": "b"
},
...
{
"id": 9,
"title": "j"
}
]
}
Contents of route/index.js file can also be found below:
...
The list component displays all items correctly but when an item is clicked, the id returns as undefined. If you click an item, it leads to http://localhost:8080/undefined
How can I fix this issue? What am I missing?