Filme.vue

Filme.vue

<template>
  <div class="row">
    <div class="col-12 mt-5">
      <h3>Esse é o produto com o id {{ $route.params.id }}</h3>
      <p>{{ filmeAtual }}</p>
    </div>
    </div>
</template>

<script>

export default {
  name: "Filme",
  data() {
    return {
    filmeAtual : {},
    filmes: [
        {
          id: "4",
          titulo: "Star Wars IV",
          subtitulo: "Uma Nova Esperança",
          valor: 30,
          avaliacao : 3,
          estoqueDisponivel: 7,
          imagem:
            "https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg",
          descricao:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        },
        {
          id: "1",
          titulo: "Star Wars I",
          subtitulo: "A Ameaça Fantasma",
          valor: 10,
          avaliacao : 4,
          estoqueDisponivel: 1,
          imagem:
            "https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg",
          descricao:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        },
        {
          id: "2",
          titulo: "Star Wars II",
          subtitulo: "Ataque dos Clones",
          valor: 20,
          avaliacao : 5,
          estoqueDisponivel: 0,
          imagem:
            "https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg",
          descricao:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        },
        {
          id: "3",
          titulo: "Star Wars III",
          subtitulo: "A Vingança dos Sith",
          valor: 30,
          avaliacao : 5,
          estoqueDisponivel: 3,
          imagem:
            "https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg",
          descricao:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        },
        {
          id: "5",
          titulo: "Star Wars V",
          subtitulo: "O Império Contra-Ataca",
          valor: 20,
          avaliacao : 4,
          estoqueDisponivel: 2,
          imagem:
            "https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg",
          descricao:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        },
        {
          id: "6",
          titulo: "Star Wars VI",
          subtitulo: "O Império Contra-Ataca",
          valor: 30,
          avaliacao : 4,
          estoqueDisponivel: 2,
          imagem:
            "https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg",
          descricao:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        },
        {
          id: "7",
          titulo: "Star Wars VII",
          subtitulo: "O Despertar da Força",
          valor: 30,
          avaliacao : 4,
          estoqueDisponivel: 7,
          imagem:
            "https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg",
          descricao:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        },
        {
          id: "8",
          titulo: "Star Wars VIII",
          subtitulo: "Os Últimos Jedi",
          valor: 20,
          avaliacao : 4,
          estoqueDisponivel: 2,
          imagem:
            "https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg",
          descricao:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        },
        {
          id: "9",
          titulo: "Star Wars IX",
          subtitulo: "A Ascensão Skywalker",
          valor: 30,
          avaliacao : 4,
          estoqueDisponivel: 2,
          imagem:
            "https://upload.wikimedia.org/wikipedia/commons/6/6c/Star_Wars_Logo.svg",
          descricao:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        },
      ],
    }
  }, 
  created() {
    let id = this.$route.params.id
    this.filmeAtual = this.filmes.filter(filme => filme.id == id)[0]
    console.log(id)
    console.log(this.filmes.filter(filme => filme.id == id))
  }
};
</script>

<style scoped>
</style>