I've recently started working with Vue and I'm facing some challenges. I'm not sure if it's even possible, but I'll pose the question to see what insights the Stack Overflow community can offer.
My query is about storing component data/props for multiple IDs within the data() method of the default export.
For example, {{$route.params.id}} captures the ID from the URL, but I want to know if I can store other data related to different IDs within the Project.Vue file itself. Is it feasible to manage data for 5 distinct IDs in a single file or do I need to create separate files (Project1.Vue, Project2.Vue, etc.) and set them up as individual routes?
I attempted to add bits to the data() method like this:
data () {
return {
msg: 'Projects',
id: [{ 1: 'hi'}, {2: 'hey'}],
two: 'project two',
three: 'project three',
}
}
However, referencing 'id' inside the <template> returned the entire object instead of the specific data. I also tried decoupling as suggested here: https://router.vuejs.org/en/essentials/passing-props.html, but couldn't get it to work.
I hope someone can provide clarity on whether my desired approach is achievable. The code snippets used are included below:
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Contact from '@/components/Contact'
import About from '@/components/About'
import Projects from '@/components/Projects'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/contact',
name: 'Contact',
component: Contact
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/projects',
name: 'Projects',
component: Projects
},
{
path: '/projects/:id',
name: 'Projects',
component: Projects,
props: {default: true}
},
]
})
Projects.Vue
<template>
<div id="projects">
<h1>{{ header }} {{ $route.params.id }}</h1>
{{id}}
</div>
</template>
<script>
export default {
name: 'Projects',
watch: {
'$route'(to, from) {
// react to route changes...
}
},
data () {
return {
header: 'Projects',
}
}
}
</script>
<style scoped>
</style>