1

Gostaria de saber como faço para alterar o conteúdo de um componente baseado em um parâmetro que esta na url do meu site.

Estou desenvolvendo um portfólio e nele criei um arquivo chamado Trabalhos.vue.

Não sei se fiz certo, mas neste mesmo arquivo criei uma array com o conteúdo que quero apresentar.

Se estiver em /estampa/1 mostra o conteúdo que ele encontrar com este id na array e por ai vai.


Em Trabalhos.vue tenho o seguinte código:

<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>
2
  • Bom dia man, o resolução para o seu problema é VueRouter Dynamic: router.vuejs.org/guide/essentials/dynamic-matching.html 21/02/2019 às 11:56
  • Bom dia, obrigado pela resposta! Já havia dado uma olhada nesta parte da documentação. Inclusive esqueci de mencionar mas na minha rota já tenho um path: '/estampa/:id'. Estou um pouco perdido em relação a como trocar o conteúdo em Trabalhos.vue baseado no id da url.
    – user3681
    21/02/2019 às 12:56

1 Resposta 1

0

Flávio o que você pode fazer é, extrair o id que está vindo através da url através de uma computed properties com regex e no Html utilizar v-for para percorrer o objeto estampas e um v-if para fazer uma condição de mostrar os elementos de estampa que tiverem o id igual ao da 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>

2
  • Valeu LeAndrade! É isso mesmo. A única coisa que fiz diferente foi o IF. Apliquei assim: <template v-if="estampa.id == $route.params.id">, desta forma, não usei o computed, peguei o ID da url usando $route.params.id. Tudo certo em relação a isto?
    – user3681
    21/02/2019 às 18:52
  • Tudo certo man, se $route.params.id estiver devolvendo um número sim, tudo certo.
    – LeAndrade
    21/02/2019 às 19:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .