Przekaż dane od dziecka do rodzica w Vuejs (czy to jest tak skomplikowane?)

Question

dzięki za przeczytanie mojego pytania.

czytałem o to

vuejs update parent data from child component

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

Koncepcja jest taka sama, muszę przekazać obiekt danych od dziecka do rodzica, Użyłem $ emitują do przekazywania danych do składnik macierzysty, ale nie działa. Czy wiesz, co jest nie tak? Sprawdź mój kod tutaj:

Vue.component('list-products', { 
 
    delimiters: ['[[', ']]'], 
 
    template: '#list-products-template', 
 
    props: ['products'], 
 
    data: function() { 
 
    return { 
 
     productSelected: {} 
 
    } 
 
    }, 
 
    methods: { 
 
    showDetailModal: function (product) { 
 
    \t 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: [ 
 
     \t {'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; 
 
    } 
 
    } 
 
});

<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>

góry dziękuję.

Answer 1

Nie słuchasz wydarzenia. Zmieniłem nazwę wydarzenia na clicked-show-detail. Spróbuj tego.

W metodzie showDetailModal Twojego komponentu.

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

W twojej Vue.

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

Example.