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:
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;
}
});
}
data()
en lugar de crearla dentro de la funcion computada conlet
? de la siguiente maneracurrentGenre: this.$route.params.miau
. Luego en lugar de hacerif (currentGenre === seccion.genres[genreKey].slug)
hacesif (this.currentGenre === seccion.genres[genreKey].slug)
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')