2

llevo varios días atascado con un problema que tengo con Vue Router, estoy inetntando hacer una aplicación similar a un videoclub a forma de "trastear". El problema principal es que no puedo acceder al valor de $this.route.params a la hora de crear una variable o hacer alguna prueba lógica con el, pero si puedo imprimirlo en la consola del navegador desde mis computer properties (mirar primera parte del código y 1era captura).

Siguiendo el tutorial de Vue Router de Vue Schools.IO, cree una computed property que me permita acceder al valor de la ruta, pero esto tampoco me sirvió (revisar segunda captura y segunda parte de código).

¿En que puedo estar fallando?, he probado y consultado varios foros pero no alcanzo a ver el problema. Gracias de antemano y un cordial saludo.

Este es mi código

<template>
  <div>
    <h1>"{{ getServices.slug }}"</h1>
    <div>
      <p>{{}}</p>
    </div>
  </div>
</template>

<script>
import servicios from "../../data.json";
export default {
  data() {
    return {
      seccion: [],
      descriptionSeccion: "",
      descripcionGenero: "",
      genre: [],
    };
  },

  computed: {
    getServices: function () {
      let serv;
      let seccion;
      // Obtenemos las keys del Json
      let serviceKeys = Object.keys(servicios.services);
      //Establecemos el valor de nuestras variables
      console.log(this.$route.params.miau);

      let target = serviceKeys.some(function (key) {
        if (servicios.services[key].slug === "peliculas") {
          seccion = servicios.services[key];
          return seccion;
        }
      });

      // si se ha encontrado un valor válido con el criterio
      // filtramos los géneros
      if (target) {
        let genreKeys = Object.keys(seccion.genres);
        genreKeys.some(function (genreKey) {
          let currentGenre = this.$route.params.miau;
          console.log(currentGenre);
          if (currentGenre === seccion.genres[genreKey].slug) {
            serv = seccion.genres[genreKey];
            return serv;
          }
        });
      }
      console.log("llegué aquí");
      return serv;
    },
  },
  getValue() {},
};
</script>

<style></style>

Recibo estos errores en consola: introducir la descripción de la imagen aquí

Siguiendo el tutorial de Vue de School.io, intenté hacer la siguiente propiedad computada

 getGenre: function () {
      return this.$route.params.miau;
    },
 // si se ha encontrado un valor válido con el criterio
      // filtramos los géneros
      if (target) {
        let genreKeys = Object.keys(seccion.genres);
        genreKeys.some(function (genreKey) {
          if (this.getGenre === seccion.genres[genreKey].slug) {
            serv = seccion.genres[genreKey];
            return serv;
          }
        });
      }

Pero sigue sin funcionar introducir la descripción de la imagen aquí

13
  • Traduce tu pregunta o posteala en el sitio en inglés. Esto es stackoverflow en español.
    – Jaime
    Commented el 30 mar. 2022 a las 15:29
  • Añadida versión resumida en español para cumplir las normas del foro, mis disculpas.
    – Luis Bauer
    Commented el 30 mar. 2022 a las 15:42
  • Luis, gracias por tu rápida respuesta, pero la versión en inglés de tu pregunta no tiene por qué existir. Son dos sitios diferentes stackoverflow.com y es.stackoverflow.com. Si gustas coloca también tu pregunta en la versión en inglés, pero las preguntas deben ser completas en inglés o completas en español dependiendo del sitio. No tiene sentido dos enunciados.
    – Jaime
    Commented el 30 mar. 2022 a las 15:47
  • Ya edité tu pregunta. Ahora, lo siguiente. Probaste crear la variable currentGenre dentro del objeto que retorna data() en lugar de crearla dentro de la funcion computada con let? de la siguiente manera currentGenre: this.$route.params.miau. Luego en lugar de hacer if (currentGenre === seccion.genres[genreKey].slug) haces if (this.currentGenre === seccion.genres[genreKey].slug)
    – Agustin G.
    Commented el 30 mar. 2022 a las 19:16
  • Buenas noches Agustín, gracias por tu respuesta y edición, y lamento las molestias. He probado lo que me dices: data() { return { seccion: [], descriptionSeccion: "", descripcionGenero: "", genre: [], currentGenre: this.$route.params.miau, }; con: ` if (this.currentGenre === seccion.genres[genreKey].slug) { serv = seccion.genres[genreKey]; return serv; }` Pero no ha habido éxito: TypeError: Cannot read properties of undefined (reading 'currentGenre')
    – Luis Bauer
    Commented el 30 mar. 2022 a las 19:56

2 respuestas 2

1

Así queda DescripcionPelicula.vue, primero deshabilité Eslint porque me molestaba. Cree la variable currentGenre como null y la cargué con el valor de this.$route.params.miau en el hook created.

Luego dentro de la función computada, hay un error con this que no logro interpretar, por lo cual no permite leer this.currentGenre en el if anidado, entonces si a la variable this.currentGenre la guardo dentro de una variable local a la funcion computada, anda sin problemas. Finalmente hacemos if (gen === seccion.genres[genreKey].slug).

De esta manera, siempre que escribas un genero correcto (ejemplo 'terror') va a andar bien. Cuando escribas un genero que no encuentre dentro de tu array va a arrojar error, porque no estás manejando errores en esos if.

Ejemplo:

http://localhost:8080/peliculas/terror anda perfecto

http://localhost:8080/peliculas/asd arroja errores por consola, porque el slug es indefinido.

<script>
// primero deshabilité Eslint porque me molestaba
/* eslint-disable */
import servicios from "../../data.json";
export default {
  data() {
    return {
      seccion: [],
      descriptionSeccion: "",
      descripcionGenero: "",
      genre: [],
      currentGenre: null, // Creo la variable "currentGenre" como null
    };
  },

  created(){
    // la cargo en el hook ``created``.
    this.currentGenre = this.$route.params.miau;
  },
  computed: {
    getServices: function () {
      let serv;
      let seccion;
      // Guardo el genero en una variable local al scope de la funcion
      let gen = this.currentGenre;
      let serviceKeys = Object.keys(servicios.services);

      let target = serviceKeys.some(function (key) {
        if (servicios.services[key].slug === "peliculas") {
          seccion = servicios.services[key];
          return seccion;
        }
      });

      if (target) {
        let genreKeys = Object.keys(seccion.genres);
        genreKeys.some(function (genreKey) {
          // Aca hago uso de la variable local "gen"
          if (gen === seccion.genres[genreKey].slug) {
            serv = seccion.genres[genreKey];
            return serv;
          }
        });
      }
      console.log("llegué aquí");
      return serv;
    },
  },
  getValue() {},
};
</script>
1
  • Perfecto, infinitas gracias, la solución funciona correctamente. Yo incialmente había intentado usar el hook de mounted pero sin éxito. Con created funciona a la perfección
    – Luis Bauer
    Commented el 4 abr. 2022 a las 13:42
1

para cualquiera que lee este Post, desde Vue Schools.IO se ha dado otra respuesta que soluciona el problema:

en la llamada a:

genreKeys.some(function (genreKey) {
      if (this.$route.params.miau === seccion.genres[genreKey].slug) {
        serv = seccion.genres[genreKey];
        return serv;
      }
    });

Cambiando la función some a una arrow function de la siguiente manera:

genreKeys.some((genreKey) => {
      if (this.$route.params.miau === seccion.genres[genreKey].slug) {
        serv = seccion.genres[genreKey];
        return serv;
      }
    });

Permite que el this.$routes encuentre el contexto de forma correcta, y por lo tanto retornando el valor adecuado, esto adicionalmente explica por que el valor del parametro se podía imprimir fuera en un console.log, pero no funcionaba dentro de este bloque de código.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.