I have a parent component with an array that I display in the template. My goal is to click on a link that uses vue-router with a dynamic id attribute, and then open a new component displaying only the element of the array that corresponds to that id. However, my current code is not functioning properly. Parent component:
<template>
<div>
<button @click="addPost">Add</button>
<div v-for="item in arr" :key="item.id">
<p>{{item.title}}</p>
<router-link :to="'/blog/' + item.id">Link</router-link>
</div
<router-view :arr="arr"></router-view>
</div>
</template>
export default {
import Post from './components/Post'
components: {
'app-post': Post
},
data() {
return {
arr: []
}
},
methods: {
addPost() {
this.arr.push({
title: this.title,
id: Math.Random()
})
}
}
}
Child component:
<template>
<div v-for="item in arr" :key="item.id">
<p>{{item.title}}</p>
</div>
</template>
export default {
props: {
arr: Array
},
created() {
return this.arr.find(item => {
return item.id === this.$route.params.id
})
}
}