Как изменить и визуализировать исходный массив из дочернего компонента в Vue

Question

У меня есть массив в родительском компоненте, который я отображаю в шаблоне, мне нужно, чтобы при нажатии на ссылку на vue-router с идентификатором динамического атрибута я открыл новый компонент, содержащий только этот элемент массив, соответствующий идентификатору. Мой код не работает. Родительский компонент:

<template>
    <div>
        <button @click="addPost">Add</button>
        <div v-for="item, index 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()
           })
       }
   }
}

Дочерний компонент:

<template>
    <div v-for="item, index in arr" :key="index">
        <p>{{item.title}}</p>
    </div>
</template>

export default {
   props: {
       arr: Array
   },
   created() {
       return this.arr.find(item => {
           return item.id === this.$route.params.id
       })
   }
}

Answer 1

Вы можете использовать params в вашем роутере-ссылке, как это

<router-link :to="{ name: 'blog', params: { id: ${item.id}}}">User</router-link>

тогда у ребенка вы можете получить доступ

   let paramID =  this.$route.params.id