gracias por leer mi pregunta.

He leído sobre ella

vuejs actualización de los padres de datos de componente hijo

https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2

El concepto es el mismo, tengo que pasar un objeto de datos de hijo a padre, he utilizado $emiten para pasar los datos para componente de los padres, pero no funciona. ¿Conoces lo que está mal? Revisar mi código aquí:

JS:

Vue.component('list-products', {
  delimiters: ['[[', ']]'],
  template: '#list-products-template',
  props: ['products'],
  data: function () {
    return {
      productSelected: {}
    }
  },
  methods: {
    showDetailModal: function (product) {
    	console.log('click product in child, how can i pass this product to productSelected data in parent?');
      console.log(product);
      this.productSelected = product;
      this.$emit('clickedShowDetailModal', product);
    }
  }
});


var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '#resultComponent',
  data: {
    listProducts: [
      	{'name':'test1',id:1},
        {'name':'test2',id:2},
        {'name':'test3',id:3}
    ],
    productSelected: {}
  },
  methods: {
    clickedShowDetailModal: function (value) {
      console.log('value');
      console.log(value);
      this.productSelected = value;
    }
  }
});

HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="resultComponent" data-toggler=".small-up-2" class="row small-up-1">
  <list-products :products="listProducts"></list-products>
</div>

<script type="text/x-template" id="list-products-template">
  <div>
    <div class="column column-block" v-for="(product, index) in products" :product="product" :index="index" :key="product.id">
    <li class="more-benefits">
        <a @click="showDetailModal(product)">Click me [[ product.name ]] and check console.log »</a>
    </li>
    </div>
  </div>
</script>

Gracias de antemano.

InformationsquelleAutor Sommer | 2017-04-11

2 Comentarios

  1. 29

    Que no se escucha para el evento. He cambiado el nombre del evento a clicked-show-detail. Intenta esto.

    En el showDetailModal método del componente.

    this.$emit('clicked-show-detail', product);
    

    En su Vue.

    <list-products :products="listProducts" @clicked-show-detail="clickedShowDetailModal"></list-products>
    

    Ejemplo.

    • Gracias u muy Bert, ur respuesta obras! 😀 u Puede dar más información acerca de la instrucción «clic-mostrar-el detalle»? Causa’ todavía tiene dudas acerca de ella.
    • es una manera corta de decir v-on:clicked-show-detail. Es la forma de definir un detector de eventos. En este caso se dice, llame a la clickedShowDetailModal método cuando se desencadena el evento. Consulte vuejs.org/v2/guide/events.html#Listening-to-Events
    • Tardó más de lo esperado para darme cuenta de que no incluyen la () al final de la llamada a la función del padre. En otras palabras @clicked-show-detail="clickedShowDetailModal" NO @clicked-show-detail="clickedShowDetailModal()"
  2. 22

    Apoyos son para parent -> child

    Puede utilizar $emit para child -> parent

    v de la directiva capta el niño componentes de los eventos que se emite por $emiten

    Hijo componente desencadenadores de eventos clicked :

    export default {
       methods: {
         onClickButton (event) {
             this.$emit('clicked', 'someValue')
         }
       }
    }
    

    Componente primario recibir clic evento:

    <div>
        <child @clicked="onClickChild"></child>
    </div>
    
    ...
    
    export default {
      methods: {
          onClickChild (value) {
              console.log(value) //someValue
          }
      }
    }
    
    • Mejor respuesta. Gracias.

Dejar respuesta

Please enter your comment!
Please enter your name here