Change Data in Vue Component depending on Route

Question

I need to change the data in a Vue Component depending on the route. For example, when the page Aircraft is loaded I want the data to contain the Aircraft images. If the page Animals is then loaded then I want the data to contain the Animals images.

The website can be seen here: https://test.joebaileyphotography.com/Portfolio

Vue.component('subitem', {
      props: ['photo'],
      template: `
        <a :href="photo.img">
            <img :src="photo.img" width="100%" height="auto">
        </a>
      `
    });    
const subitem = {
        data() {
            return { 
                photos: [
                    {img: 'Images/Portfolio/Aircraft/image1.jpg'},
                    {img: 'Images/Portfolio/Aircraft/image1.jpg'},
                    {img: 'Images/Portfolio/Aircraft/image1.jpg'}
                ],
            }
        },
        template: `
            <div>
            <breadcrumbs></breadcrumbs>
            <info></info>
            <div class="portfolio" id="portfolio" data-featherlight-gallery data-featherlight-filter="a:not(.all)">
            <subitem
                v-for="subitem in photos"
                :key="subitem.photo"
                v-bind:photo="subitem">
            </subitem>
            </div>
            </div>
      `
    };
const router = new VueRouter({
        mode: 'history',
        routes: [
            { path: '/Portfolio/:id', component: subitem },
            { path: '/Portfolio', component: item }
        ]
    });

You can check the site you are on with $route.params.id and show the photos based on that — Flink, Commented Nov 19, 2019 at 14:20
How would I create an if statement within const subitem = { data() { — Joe Bailey, Commented Nov 19, 2019 at 16:25

Michal Levý · Accepted Answer · 2019-11-19 16:55:23Z

1

You can use Vue-router's feature Dynamic Route Matching and access the :id using this.$route.params.id in your component

Or you can pass route parameters as props. Just change your route definition to { path: '/Portfolio/:id', component: subitem, props: true }, and define id prop in your subitem component

You can use passed id to filter the array of your photos, for example like this:

computed: {
  getPhotosById(id) {
    return this.photos.filter(photo => photo.igm.startsWith(`Images/Portfolio/${id}/`))
  }
}

and in the template do v-for="photos in getPhotosById($route.params.id)"

edited Nov 19, 2019 at 16:55

answered Nov 19, 2019 at 14:26

Michal Levý

38.2k8 gold badges81 silver badges92 bronze badges

That's great. I'd like to create an array for each page such as Aircraft and Animals etc. I want to use v-for="subitem in $route.params.id" however this loops through each character and doesn't give the whole word to match up with the data array
– Joe Bailey
Commented Nov 19, 2019 at 16:32
because passed id is just value, name of directory. You can use it to filter all photos array. Edited my answer to add an example.....
– Michal Levý
Commented Nov 19, 2019 at 16:57
Thank you that worked. Just had to change computed to methods though
– Joe Bailey
Commented Nov 19, 2019 at 20:50

Add a comment |

Collectives™ on Stack Overflow

Change Data in Vue Component depending on Route

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related