I have results data in child component but I should bring it to main component.
Main Component in Parent, so each time I click the button, the result should be gathered in main app
<button @click="showFinalResult">Click me</button>
Child component data here and I just need to show results in json format in parent, the results are input results
results: [],
You can emit event for child for sending data:
Vue.component('Child', {
template: `
<div class="">
</div>
`,
data() {
return {
results: [1,2,3]
}
},
mounted() {
this.$emit('update', this.results);
}
})
new Vue({
el: '#demo',
data() {
return {
res: [],
show: false
}
},
methods: {
getResult(res) {
this.res = res
},
showResults() {
this.show = !this.show
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button @click="showResults">Click me</button>
<p v-if="show">{{ res }}</p>
<child @update="getResult" />
</div>