1

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

1

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

1

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

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

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