Stuck! I’ve been hitting my head against the wall for hours trying to figure this out...
Technologies Utilized:
- Vue (v3.0.0)
- Vue-Router (v4.0.0-0)
- Bootstrap (v5.1.1)
The Objective:
I have two pages (Home.vue, MetaUpdate.vue) and one component (Document.vue). Home page contains multiple Document components. Upon clicking the "Update" div/button within a Document component, it should route to the MetaUpdate page. The MetaUpdate page needs to receive the entire Doc JS object which is passed down from the Document component through the router.
The Issue:
When passing my custom object as a prop through the router, it seems to interpret it as the string "[object Object]" instead of the actual object. However, when passing the custom object as a prop from parent component to child component, it interprets correctly. So, how do I effectively send props through the router? It's worth mentioning that originally I was successfully passing two Strings through the router, so I'm confused why switching to a custom object caused everything to break.
JavaScript Object:
class Doc {
constructor(docID, title, status) {
this.docID = docID;
this.title = title;
this.status = status;
}
}
router.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import MetaUpdate from '../views/MetaUpdate.vue'
import {Doc} from '../controllers/data'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/metaupdate/:doc',
name: 'MetaUpdate',
component: MetaUpdate
}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router
Home.vue
Though there’s more in the file, this much suffices to address the question at hand.
<template>
<div class="col col-12 col-lg-6 in-progress">
<div class="doc-status">In Progress</div>
<template v-for="(doc, index) in inProgress" :key="index">
<Document :doc="doc"></Document>
</template>
</div>
</div>
</template>
<script>
import Document from "../components/Document.vue";
import {Doc} from '../controllers/data'
var inProgress = [];
var pending = []
var completed = [];
export default {
data: function() {
return {
inProgress,
pending,
completed
}
},
components: {
Document
}
}
/***** Temporary Push of Docs *****/
for(let i = 0; i < 5; i++){
let docA = new Doc(i, 'Progress Document', 'in-progress');
let docB = new Doc(i, 'Pending Document', 'pending');
let docC = new Doc(i, 'Completed Document', 'completed');
inProgress.push(docA);
pending.push(docB);
completed.push(docC);
}
/***** Temporary Push of Docs *****/
</script>
Document.vue
<template>
<div class="doc">
<div class="doc-title">{{ doc.title }}</div>
<router-link to="/docviewer" v-if="isInProgress" class="doc-item submit">Submit</router-link>
<router-link to="/docviewer" class="doc-item preview">Preview</router-link>
<router-link
:to="{ name: 'MetaUpdate',
params: {doc: this.doc} }" v-if="isUpdateOrDelete" class="doc-item update">Update
</router-link>
<router-link to="/docviewer" v-if="isUpdateOrDelete" class="doc-item delete">Delete</router-link>
</div>
</template>
<script>
import {Doc} from '../controllers/data'
export default {
props: {
doc: {
type: Doc,
required: true
}
},
computed: {
isInProgress() {
return this.doc.status === 'in-progress';
},
isUpdateOrDelete() {
return this.doc.status === 'in-progress' || this.doc.status === 'pending';
}
}
}
</script>
MetaUpdate.vue
Though there’s more in the file, this much suffices to address the question at hand.
<template>
<div class="tabs">{{ $route.params.doc.title }}</div>
</template>
<script>
import { Doc } from '../controllers/data'
export default {
props: {
doc: {
type: Doc,
required: true
}
}
}
</script>