0

I'm playing around with vue, vue-router, and props, but now i'm not really sure if i'm going about this the right way.

I have an entry component like this, a entry component should link to something like entryDetails/:id :

entry.vue

<template>
  <router-link :to="{name:'entryDetails', params:{id: this.id}}">
    <h3>{{ title }}</h3>
    <span>{{ subtitle }}<span>
  </router-link>
</template>

<script>
export default {
  props: {
    id: Number,
    title: String,
    subtitle: String,
    hours: Number
  }
};
</script>

And a component with a list of entries:

entryList.vue

<template>
  <div class="wrapper">
    <entry :id="1" title="This is a title" subtitle="And a subtitle" :hours="3" />
    <entry :id="2" title="Another title" subtitle="Another subtitle" :hours="8" />
    <entry :id="3" title="Last title" subtitle="Last subtitle" :hours="1" />
  </div>
</template>

<script>
  import entry from "../entry.vue";

  export default {
    components: {
      entry: entry
  };
</script>

And now when i click on an entry i want to go to entryDetails/:id to show all the information in the props. Something like this:

entryDetails.vue

<template>
  // Show data from props where id is :id from url
  <div class="wrapper">
    <h1>{{ title }}</h1>
    <span>{{ subtitle }}</span>
    <span>Hours: {{ hours }}</span>
  </div>
</template>

<script>
// ??
</script>

Is the the way this should be done? If so, how do i get the data from my props in entryDetails.vue after clicking on a entry?

Edit: There was a reply (deleted) that this is easy with vuex, otherwise it should be done with parameters. Vuex is an option for me..but i prefer not using it for now.

Awesom-o
  • 534
  • 6
  • 20
  • @Dan Heard of it, if it's really the only way to do this without using parameters i guess i'll have to look into it more. I remember reading to only use is if you need to access certain data in (a lot of) different places and i thought this might not fall in that category. – Awesom-o Mar 23 '20 at 10:48
  • Without Vuex, there are two options I can think of. You can either [pass an object param](https://stackoverflow.com/questions/50506470/vue-router-pass-object-as-props) to entryDetails (the page won't work if refreshed), or have App.vue manage state and pass props to all routes through `router-view`. Both could probably be considered anti-patterns. – Dan Mar 23 '20 at 11:30

0 Answers0