Vue2 Laravel5.3 Wie Eltern auf Ereignis

Question

Daten von Kind zu senden Was ich versuche, hier zu erreichen, ist, dass wenn ich in Item-card-product-choices.vue auf das Element, klicken Sie selectPC mit dem Argument productChoice.id auslösen, und dies wird auch Eltern auslösen zu hören Dieses Ereignis und gleichzeitig die Argumentation. Ich folge the doc zu tun, aber Eltern scheint nicht zu hören selectPC. So lösen Sie bitte die folgenden Fragen senpai:

1. was ist falsch mit meiner Art und Weise für die Eltern auf das Kind der Veranstaltung zu hören?
2. Wenn der Elternteil zuhört, wie erhält man das Argument, das das Kind auch im Ereignis verwendet? Danke.

Artikel-Card-Produkt-choices.vue

<template> 
    <ul class="product-choices"> 
    <li 
    v-for="productChoice in productChoices" 
    class="product-choice" 
    @click.prevent="selectPC(productChoice.id)" 
    > 
     <svg v-if="productChoice.color === 'red'" width="20" height="20"> 
     <rect width="20" height="20" style="fill:#FF3333"></rect> 
     </svg> 
     ...... 
     ...... 
     ...... 
    </li> 
    </ul> 
</template> 

<script> 
    export default { 
    props:[ 
     'index', 
     'product' 
    ], 
    data() { 
     return { 
     productChoices:{}, 
     } 
    }, 
    methods:{ 
     selectPC(productChoice){ 
     var vm = this; 
     vm.$emit('select',productChoice) 
     }, 
    } 
    } 
</script> 

Parent.vue

<template> 
    <div> 
    .... 
    <product-choices :product="product" @selectPC="getSelected(productChoice)"></product-choices> 
    .... 
    </div> 
</template> 

<script> 
    import productChoices from './Item-card-product-choices.vue'; 
    export default { 
    components:{ 
     'product-choices':productChoices 
    }, 
    data(){ 
     return{ 
     productChoiceSelected:{}, 
     } 
    }, 
    methods:{ 
     getSelected(selected){ 
     var vm = this 
      alert(1) // this is what I added to test if it listens 
     vm.$on('select',function(selected){ 
      vm.$http.get('/getProductChoice/'+vm.product.id+'/'+selected).then((response)=>{ 
      vm.productChoiceSelected = response.data 
      }); 
     }) 
     } 
    } 
</script> 

Answer 1

Die Veranstaltung Sie Emittieren dem Namen "wählen", nicht "selectPC", so dass Sie müssen für die in Parent.vue

<product-choices :product="product" @select="getSelected"></product-choices> 

IhrehörenMethode soll einen $on Zuhörer entweder nicht hinzufügen ...

getSelected(selected) { 
    this.$http.get('/getProductChoice/' + this.product.id + '/' + selected).then(response => { 
    this.productChoiceSelected = response.data 
    }) 
}