Changing content of a Vue component based on the URL

Question

I would like to know how to change the content of a component based on a parameter that is in the url of my site.

I’m developing a portfolio and in it I created a file called Works.See.

I don’t know if I did it right, but in this same file I created an array with the content I want to present.

If it is in /stamp/1 it shows the content it finds with this id in the array and so on.

---

In Jobs.I have the following code:

<template>

<div>

    ( Conteúdo de acordo com o ID encontrado na url )

</div>

</template>

<script>

export default {

    data() {

        return {

            estampas: [

                {

                    id: '1',
                    name: 'Estampa 1',
                    content: [

                        { img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 1 estampa 1' },
                        { img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 2 estampa 1' },
                        { img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 3 estampa 1' }

                    ]

                },

                {

                    id: '2',
                    name: 'Estampa 2',
                    content: [

                        { img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 1 estampa 2' },
                        { img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 2 estampa 2' }

                    ]

                },

            ]

        }

    }

}

</script>

Answer 1

Flávio what you can do is, extract the id that is coming through the url through a computed properties with regex and in Html use v-for to traverse the object estampas and a v-if to make a condition to display the stamp elements that have the id equal to the url:

let app = new Vue({
  el: '#app',
  data: {
    url: 'estampa/:1', // Mude o id de 1 para 2, será mostrado estampa 2
    estampas: [{
        id: '1',
        name: 'Estampa 1',
        content: [

          {
            img: 'https://via.placeholder.com/500x300&text=Estampa',
            caption: 'Legenda 1 estampa 1'
          },
          {
            img: 'https://via.placeholder.com/500x300&text=Estampa',
            caption: 'Legenda 2 estampa 1'
          },
          {
            img: 'https://via.placeholder.com/500x300&text=Estampa',
            caption: 'Legenda 3 estampa 1'
          }
        ]

      },

      {
        id: '2',
        name: 'Estampa 2',
        content: [{
            img: 'https://via.placeholder.com/500x300&text=Estampa',
            caption: 'Legenda 1 estampa 2'
          },
          {
            img: 'https://via.placeholder.com/500x300&text=Estampa',
            caption: 'Legenda 2 estampa 2'
          }
        ]
      }]
  },
  computed: {
    id_url() {
      const url = this.url;
      const idUrl = /[*0-9]/g;
      const id = url.match(idUrl)[0];
      
      // retorna apenas o número do id da url
      return id;
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div v-for="estampa in estampas">
    <div v-if="estampa.id == id_url">
      <p>ID: {{ estampa.id }} - nome: {{ estampa.name }}</p>
      <p>
        <img :src="estampa.content[0].img">
        <figcaption>{{ estampa.content[0].caption }}</figcaption>
      </p>
      <p>
        <img :src="estampa.content[1].img">
        <figcaption>{{ estampa.content[1].caption }}</figcaption>
      </p>
    </div>
  </div> 
</div>