0

Estoy haciendo una web con vue.js y php 7. Es una web de un medio de comunicación donde se puede visualizar artículos.

Tengo una vista home donde llamo al back cuando se crea y obtengo todos los articulos. Hasta ahí todo perfecto. El problema es el siguiente:

En la vista app tengo un navigation-drawer en donde cada vez que se crea la vista llamo al back y muestro todas las categorias de articulos que hay.

<v-navigation-drawer
              v-model="drawer"
              app
              dark
              temporary
              clipped
              color="secondary"
              v-if="this.user.tipo == null"
      >
          <v-list
                  dense
          >
              <v-list-item-group
                      active-class="success"
              >
                  <div class="categorias">


                  <v-list-item v-for="categoria in categorias">
                      <v-list-item-title
                        class="text-center title ma-4"
                        style="text-transform: uppercase;"
                        @click="$router.push({name:'HomeFiltrado', params:{categoria: categoria.nombre}})"
                      >
                          {{categoria.nombre}}
                      </v-list-item-title>
                  </v-list-item>


                  </div>

              </v-list-item-group>
          </v-list>
      </v-navigation-drawer>

La vista donde se va a filtrar los articulos dependiendo de la categoría de los mismos se llama HomeFiltrado y ahí simplemente cada vez que se crea la vista llamo al back solicitando los articulos de la categoría que vengan como parametro en el route

created() {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            this.movil = true;
        }
        this.obtenerArticulos()
    }

El problema viene cuando le doy en el menu a la categoria (por ejemplo) POLITICA y una vez en la ruta ** /categoria/politica ** le doy a otra categoría (por ejemplo) Economía, lo que sucede es que la vista no se actualiza y es como que no se crea otra vez la vista ni es capaz de detectar el cambio del parametro en el router. Estoy muy perdido y ya no se como cogerlo. Gracias de antemano.

A continuacion os dejo los script de las vistas

VISTA HOME FILTRADO

<script>
import KJUR from 'jsrsasign'
import decode from 'jwt-decode'
import axios from 'axios'
import ScaleLoader from 'vue-spinner/src/ScaleLoader'
import router from '@/router'
import {mapActions, mapState} from 'vuex'
import Twitter from "../components/twitter";

export default {
  name: 'HomeFiltrado',
    data(){
      return{
          movil: false,
          articulos: {},
          cargando: false
      }
    },
    components: {Twitter, ScaleLoader},
    created() {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            this.movil = true;
        }
        this.obtenerArticulos()
    },
    methods: {
        ...mapActions(['tweet']),
        async obtenerArticulos(){
            //console.log("obteniendo articulos "+this.$route.params.categoria)
            this.cargando = true;
            let jws = KJUR.jws.JWS; //Objeto para tratar JWT
            let secret = "my-secret-pass"; // Clave privada

            //crear JWT
            let header = {alg: "HS256", typ: "JWT"}; //Cabecera de JWT
            let data = {
                    id: '',
                    func: 'filtrarArticulos',
                    autor: '',
                    fecha: '',
                    categoria: this.$route.params.categoria,
                    estado: ''
            };

            let jwt = jws.sign("HS256", header, data, {utf8: secret}); //Firma de JWT

            let formd = new FormData();
            formd.append("jwt", jwt)

            let response = await axios.post(this.HOST+'server/api.php', formd)
            let datos = response.data


            if (datos.status) {
                //verify JWT
                let token = datos.token;
                let isValid = jws.verifyJWT(token, {utf8: secret}, {alg: ["HS256"]})

                if (isValid) { //Valido, decodificamos el jwt
                    let decoded = decode(token)

                    //Comprobar status
                    if (decoded.status) { //Datos como los esperabamos

                        if (decoded.data){ //Si hay articulos
                            this.articulos = decoded.data
                            this.cargando = false
                        }else{ //Si no hay artículos
                            this.cargando = false
                        }

                    } else { //Datos erroneos
                        this.mensaje = 'Upss... prueba otra vez'
                        this.cargando = false
                    }

                } else { //Si no es valido
                    this.mensaje = 'Upss... prueba otra vez'
                    this.cargando = false
                }

            }else{
                if (datos.mensaje !== null){
                    this.mensaje = datos.mensaje;
                }else{
                    this.mensaje = 'Server KO... intentelo de nuevo'
                }
                this.cargando = false
            }
        },
    },
    computed:{
      ...mapState(['HOST'])
    },
}
</script>

index.js router

mport Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  const routes = [
  { //VENTANA PRINCIPAL
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  { //VENTANA PRINCIPAL POR CATEGORIA
    path: '/categoria/:categoria',
    name: 'HomeFiltrado',
    component: () => import('../views/HomeFiltrado.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  let user = {
    usuarioID: localStorage.getItem('usuarioID') || null,
    tipo: localStorage.getItem('tipo') || null
  }

  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (user.usuarioID !==null && user.tipo !==null) {
      next()
    } else {
      next({name: 'Home'})
    }
  } else if(to.matched.some(record => record.meta.requiresAdmin)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (user.usuarioID !==null && user.tipo === 'administrador') {
      next()
    } else {
      next({name: 'Administracion'})
    }
  }else{
    next() // make sure to always call next()!
  }
})

export default router

OS DEJO EL CODIGO COMPILADO EN UN HOST PARA QUE PROBEIS LO QUE OS DIGO https://proyectofinallalo.000webhostapp.com/

2 respuestas 2

0

El problema que tienes es que en la vista /categoria/:categoria buscas la data en la creacion de la vista, vue no re-renderiza el componente HomeFiltrado a tu cambiar la ruta, la logica es que si estas en el componente que debe renderizarse porque renderizarlo?

Tienes que indicarle que se re-renderize usando un watcher de la ruta para cuando su valor cambie. Aqui hice un ejemplo simple en base a lo que tienes, la diferencia es que paso el valor prop: true, en la ruta para usar un prop de watcher en vez del $route

https://codesandbox.io/s/elated-allen-4b8q6?file=/src/App.vue

0

Prueba a guardar en una propiedad computada el objeto $route, de esta forma podrás acceder a todas sus propiedades. El objeto se actualizará cada vez que cambies la ruta.

computed: {
    ruta() {
        let self = this;
        return self.$route;
    }
}

Después, en tu caso, podrías crear otra propiedad computada para acceder al/los parámetro/s de la ruta.

computed: {
    ruta() {
        let self = this;
        return self.$route;
    },
    cat() {
        let self = this;
        return self.ruta.params.categoria;
   }
}

Un saludo.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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