2

Buen día.

Quiero cargar en un data el contenido de un props, parece que si se pasan los datos pero al momento tratar de cargarlo no se muestra, a lo mejor con el código entenderán:

TablaRepartoComponent.vue

Props: props: ['pelicula'],

Mounted: this.id = this.pelicula.id;

Data: id = ''

la intención de tener el id es para poder obtener datos mediante un url que se encuentra en un método:

Metodo:

GetPeliculasActores: function () {
   let self = this;

   axios.get('/reparto/' + self.id)
        .then(function (response) {
            let answer = response.data;
            self.peliculas_actores = answer;
        })
}

TablaPeliculasComponent.vue

Este es el modo en el que paso mi props de la tabla de peliculas a la tabla de repartos

<button v-on:click="VerTablaRepartoComponent(pelicula)">Actores</button>

teniendo en el Data una propiedad persona: {} y en el metodo del boton es:

VerTablaRepartoComponent(pelicula){
    let self = this;

    axios.get('/getpelicula/' + pelicula.id)
         .then(response => { self.pelicula = response.data})
}

y al momento de llamar el componente le paso la pelicula (segun yo con el id)

<tabla-reparto-component :pelicula="pelicula"></tabla-reparto-component>

espero y entiendan mi intención.

muchas gracias por leer y por su apoyo

3
  • Podrias confirmar si vas a buscar la pelicula en el padre despues de renderizar el componente hijo? porque me parece que tu problema es que el hijo recibio la propiedad vacia y no la va a actualizar, salvo que le avises
    – gbianchi
    el 27 ago. 2019 a las 2:23
  • tendrías que colocar un watcher en el componente hijo pendiente de recibir la prop pelicula... y cuando lo haga setee el id en tu child component el 27 ago. 2019 a las 2:50
  • @gblanchi lo que quiero es buscar el id de la película para después en el componente hijo con ese id de la película poder realizar una consulta (estoy usando laravel y vue) y poder enseñar en el componente hijo a los actores de esa película.
    – Jorkie
    el 27 ago. 2019 a las 22:22

1 respuesta 1

0

No entendí muy bien pero si te sirve la comunicación de hijo a padre es con eventos y la comunicación de padres a hijos es con props.

var pelicula = {
  template: `
      <div >
        <ul>
            <li v-for="(pelicula, index) in peliculas" :key="index">
                <h4>{{ pelicula.titulo }}</h4> 
                <button      
                  @click.prevent="selecion(pelicula.id)">
                  Seleccionar
                </button>
            </li>
        </ul>
    </div>
 `,
  methods: {
    selecion(id){
      this.$emit('padre', id);
    }
  },
 data(){
  return {
     peliculas: [
      {
        id: 1,
        titulo: "pelicula 1"
      },
       {
        id: 2,
        titulo: "pelicula 2"
      }],
  }
 
 }
};

var datos = {
  props:["pelicula"],
  
   mounted(){
  
    
   
   
  },
  
  watch:{
    pelicula(newvalue, oldvalue){
      // en lugar de usar la asignacion directa utiliza axios
        this.datos = {
          titulo: "pelicula seleccionada " + this.pelicula,
          descripcion: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem suscipit, laudantium in minima commodi impedit ipsa voluptatem temporibus mollitia quas dolor aliquam et cupiditate fuga inventore vitae porro soluta necessitatibus."
        };
      
    }
  },
  template: `
    <div>
      <pre>{{ datos }}</pre>
    
       
    </div>
 `,
  data(){
    return {
      datos: {}
    }
  }
   
};

var vw = new Vue({
  el:"#app",
  components: {
    'pelicula': pelicula,
    'datos': datos
  },
  data:{
    peli_seleccionada: null
  },
  methods: {
    padre(id){
      this.peli_seleccionada = id;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>




<div id="app">
  
    <pelicula @padre="padre"></pelicula style="widt: 50%; display: block; float: left;">
    <datos :pelicula="peli_seleccionada" style="widt: 50%; display: block; float: left;"></datos>
 
</div>

3
  • Me parece que su problema es el watch.. todo esto que decis, ya lo esta haciendo como corresponde
    – gbianchi
    el 27 ago. 2019 a las 3:27
  • No entendí muy bien lo que preguntaba. Solo intuí que no tiene bien la comunicación entre componentes por como veo que los esta utilizando. Por eso hice el sencillo ejemplo de comunicación hijo->padre y de padre->hijo el 27 ago. 2019 a las 3:42
  • Si no entendiste bien, le hubieras dejado un comentario (como hicieron otros usuarios) para que clarificara su pregunta. Esto es para evitar que te caigan negativos si tu respuesta no tiene nada que ver.
    – gbianchi
    el 27 ago. 2019 a las 13:39

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.