2👍
✅
this.lists.id
is always undefined. Our this.lists
is an array. You should place router inside v-for and access item.id
Should be
<div v-for="(item, index) in lists" class="list" :key="item.id">
<router-link :to="'/' + item.id">
{{ item.title }} {{ item.id }}
</router-link>
</div>
Updated
As discussion, you can update your Object.vue
<template>
<div id="object">
<div>
{{ object.id }}
</div>
<div>
{{ object.title }}
</div>
</div>
</template>
<script>
export default {
name: 'Object',
data() {
return {
id: this.$route.params.id,
object: {},
};
},
methods: {
getObjects() {
this.$http.get('/static/data.json')
.then((response) => {
console.log(response);
this.object = response.body.objects.find(item => item.id == this.id)
})
}
},
mounted() {
this.getObjects();
}
};
</script>
or if you can import data.json
<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: {},
};
},
mounted() {
this.object = json.objects.find(item => item.id == this.$route.params.id)
}
};
</script>
Source:stackexchange.com