i currently have two components named projectListComponent and projectSingleComponent. I want to pass an object from component 1 to component 2 during redirection. Here is my code:
projectListComponent.vue
<template>
<div class="row justify-content-center">
<div class="col-sm-6 col-md-4" v-for="(item, index) in projects" :key="item.id">
<div class="card" v-if="percentCompletedTask(index) != '100%'">
<div class="card-body">
<h5 class="card-title">{{item.title}}</h5>
<h6 class="card-subtitle mb-2 text-muted">
<div class="progress">
<div class="progress-bar" role="progressbar" :style="{width:percentCompletedTask(index)}" aria-valuemin="0" aria-valuemax="100">{{percentCompletedTask(index)}}</div>
</div>
</h6>
<p class="card-text">{{item.description}}</p>
<router-link :to="{ name: 'projectSingleComponent', params: {id: item.id, project: item} }">Read More</router-link>
</div>
</div>
</div>
</div>
</template
<script>
import projectSingleComponent from '@/components/projectSingleComponent.vue'
export default {
name: 'projectListComponent',
data() {
return {
components: {projectSingleComponent},
newProject:
{
title: '',
description: '',
status: false,
task:[]
},
projects:[
{
id: 1,
title: 'ptyxiakh',
description: 'TEI',
status: false,
task:[{title:'task1', completed: false}, {title:'task2', completed: true},{title:'task2', completed: true}]
},
{
id: 2,
title: 'vue app',
description: 'My first vue js app',
status: false,
task:[{title:'task1', completed: false}]
},
{
id: 3,
title: 'Codeigniter',
description: 'My first codeigniter app',
status: false,
task:[{title:'task1', completed: false}, {title:'task2', completed: true}]
},
{
id: 4,
title: 'Codeigniter_new',
description: 'My first codeigniter app',
status: false,
task:[{title:'task1', completed: true}, {title:'task2', completed: true}]
},
{
id: 5,
title: 'nexctloud',
description: 'My first codeigniter app',
status: false,
task:[{title:'task1', completed: true}, {title:'task2', completed: true},{title:'task2', completed: true}]
},
],
completedProject:[],
uncompletedProject:[]
}
},
}
}
</script>
projectSingleComponent.vue
<template>
<div>
<h2>Id: {{project.id}}</h2>
<h2>title: {{project.title}}</h2>
<h2>description: {{project.description}}</h2>
<h2>status: {{project.status}}</h2>
</div>
</template>
<script>
export default {
name: 'projectSingleComponent',
data() {
return {
project: {
id: 0,
title: '',
description: '',
status: false,
tasks: []
}
}
},
created() {
let projectData = this.$route.params;
alert(projectData)
}
};
</script>
my application displays the message "[object Object]" when redirected. How can I properly parse the data from the array projects (in projectListComponent) to the second component?