Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to get data from a nested component

  • I have this 3 components. One is for the Question component that consists of questions. The second is for QuestionOption for the list of choices. And the third one is my main component. How do I get the data from the QuestionOption component to the main component. Since the main component is not the parent of the QuestionOption I cannot use the $emit. Also I make use of bus but it’s not working on my case. Can anyone help me on this.

    Also how will I get all the chosen answers after the submission of the button? Here is my code.


    	<div class="quiz-background">
    			v-for="(question, $indexParent) in randomQuestions"
    		<section style="margin:16px">


    		{{indexParent + 1}}.{{ question }}
    		v-for="(choice, key, $index) in choices" 
    import QuestionOption from './QuestionOption.vue';
    export default {
    	props: ['question', 'indexParent', 'choices', 'correctAnswer'],
    	components: {


    <v-ons-list modifier="inset">
    		:name="'question-' + indexParent"
    		<label class="left">
    				:name="'question-' + indexParent"
    				:input-id="indexParent + '-' + index"
    			:for="indexParent + '-' + index"	
    			:class="{'success' : isSuccess, 'danger' : isDanger}"		
    			{{ letter }} . {{ choice }}
    import Vue from 'vue';
    var bus = new Vue();
    export default {
    	data() {
    		return {
    			chosenAnswer: ''
    	props: ['letter', 'choice','correctAnswer', 'indexParent', 'index'],
    	computed: {
    		isSuccess () {
    			return this.chosenAnswer === this.correctAnswer;
    		isDanger () {
    			return this.chosenAnswer !== this.correctAnswer;

  • Onsen UI


    Short answer: Vuex

    Long answer:

    • Use this.$emit('customEvent', ...) in QuestionOption and @customEvent="$emit('customEvent', $event) in Question to forward it to the parent.
    • Pass a function from the main component all the way down to QuestionOption via props and let that function modify the main component’s state. That way you can modify something in the main component from the last child component.
    • this.$root is always present in non functional components, so you can use it as a bus as well: this.$root.$on(...) and this.$root.$emit(...).

  • @Fran-Diox thanks for your answer.