Anuncio

Entra a participar en el Slack de Laraveles. Solicita tu invitación aquí.
Nos ayuda a manter la comunidad

#1 07/01/2018 21:14:11

luijo265
Miembro
Registrado: 26/11/2017
Mensajes: 2

No se actualiza componente

Buenas Amigos de la Comunidad

   Soy algo nuevo por aca. Estoy trabajando en un proyecto de Laravel 5.4 con VueJS, yel problema que tengo y quisiera lograr resolver es el siguiente.
 
   Tengo mi componente principal y entre sus componentes hijos tengo uno que es "menu3". Resulta que este componente tiene como prop la variable "menues", donde recibe un arreglo con las opciones del menu. Bueno este funciona bien si coloco como constante el arreglo desde el componente principal, me logra ilustrar mediante una lista de clase navbar. Fino por ese lado, pero el problema comienza a dar cuando hago una peticion a la base de datos de este arreglo. El componente solo toma el valor inicial de la variable "menues" que es [].

    Logre darle la vuelta colocando un v-if al componente mientras la variable sea nula no renderiza el componente "menu3", pero insisto que debe haber un metodo mas eficaz que de el mismo resulta sin tener que aplicar lo anterior.

App.vue

<template lang="html">
	<div id="app">
		<div class="container">
			<h1>Encabezado</h1>
		</div>
		<div class="container">
			<h1>Aqui va el menu</h1>
			<!-- {{ msg }} -->
			<!-- <div v-if="storeMenu.visible"> -->
		 		<menu3 
		 			v-bind:menues="this.dataMenu"
					@changeTab="getPlantilla"
		 			>		 					
		 		</menu3>			
			<!-- </div> -->
		</div>
		<div class="container">
			<h1>Aqui va las plantillas con las info</h1>
			<page1 v-if="storeMenu.typePageId==1"></page1>
			<page2 v-if="storeMenu.typePageId==2"></page2>
		</div>
		<div class="container">
			<h1>Aqui va el footer</h1>
		</div>

		<!-- login -->

	</div>



</template>

<script>
  // import events from './events/events.vue'
  import axios from 'axios';
  import menu3 from './menu/menu.vue';
  import page1 from './typePages/page1/page1.vue';
  import page2 from './typePages/page2/page2.vue';

  export default {
  	components:{
  		// 'events':events,
  		'menu3':menu3,
  		'page1':page1,
  		'page2':page2,
  	},
  	methods: {
		getMenuPrincipal(){
			var urlEvents = 'menus';
			axios.get(urlEvents).then(response => {
				this.dataMenu = response.data
				this.storeMenu.visible = true;
			});
		},
		getPage(){
			var urlEvents = 'pages/'+this.storeMenu.pageId;
			axios.get(urlEvents).then(response => {
				// this.storeMenu.pageId = response.id;
				this.storeMenu.typePageId = response.data[0].type_page_id;
				// console.log("como queda storeMenu: ",JSON.stringify(this.storeMenu))
			});
		},
		getPlantilla(tab,index){
			// console.log("llegamos con la posision ",index);
			// console.log("Este el json que llega ",JSON.stringify(tab));
			this.storeMenu.pageId = tab.page_id
			// console.log("Este es el pageId que se va a mostrar----> ",this.storeMenu.pageId);
			this.getPage();			
		},
	},
  	data () {
	    return {
	    	dataMenu: [],
	    	verMenu:false,
	     	language: 1, 	//Espanol por defecto (siendo 1 espanol)
	     	storeMenu:this.$store.state.menu,
	    }
  	},
	  created: function(){
	  	this.getMenuPrincipal();
	},
  }


</script>

<style lang="css">


</style>

menu.vue

<template lang="html">
	<div class="menu3">
		<div class="container">

		<!-- <ul class="nav navbar-nav"> -->
		<ul class="nav nav-tabs">
			<li role="presentation" v-for="men,i in menu" @click="changeTab(men,i)"> <a href="#">{{ men.title }}</a> </li>
		</ul>

		</div>
		<hr>
		
 	</div>
</template>



<script src="./menu.js"></script>
<!-- <style src="./menu.css" scoped></style> -->

menu.js

import axios from 'axios'
	export default{
		data(){
			return {
				texto: 'Hola mundo',
				mostrarText: false,
				posicion:0,
				menu:null,
				// menu:this.$store.state.menu,
				// users:[],
			}
		},
		components:{
		    // 'carrousel':carrousel,
		    // 'plantilla1':plantilla1,
		    // 'plantilla2':plantilla2,
		  },
		props: {
			menues:{
				type: Array,
				// required:true,
				default:function () {
					return [{title:"Inicio"}];
				},
			},
		},
		methods: {
			changeTab(tab,index){
				//Para cambiar de componentes al darle a los tabs
				this.$emit('changeTab',tab,index)
			},
			getMenues(){
				// Obtengo de la consulta los menu a mostrar
				// los guardo en el store
				console.log("Antes--->",JSON.stringify(this.menues))
				this.menu = this.menues;
			},
		},
		created(){
			// Al iniciar se cargan los menues
			this.getMenues();
		},
	}
// </script>

Desconectado

Pié de página <- REVISAR ->

Powered by FluxBB

Ayuda a mantener la comunidad: