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/