How to access child component data in Vue

Question

I am making a course evaluation form, I have question components inside of it like this:

<question v-for="(question,index) in questions"
                :questionText="question.questionText"
                :question-index="++index"
                ref="questions"> </question>

each question has radio button and a result field connected with v-modal. I want to submit the result for each question to firebase database.

I need to either access the result from evaluation-form (parent) or have a submit function in question component and call it to make each question submit its data.

I tried refs but I failed, I also find events quite hard, what is the easiest way?

Your component should emit data to its parent based on events. If you emit an input event, you can bind the result via v-model. See vuejs.org/v2/guide/components.html#Using-v-model-on-Components — Phil
– Phil, Commented Dec 23, 2018 at 22:28

erinc · Accepted Answer · 2018-12-23 22:46:09Z

1

I figured out the solution with events:

For those who are also having a hard time with events

Here is my solution:

On question (child):

            <input type="radio" :value="point" v-on:click="sendAnswer(point)" v-bind:name="'answer' + questionIndex">

methods: {
  sendAnswer: function(point) {
    this.answer = point;
    const index = this.questionIndex-1;
    this.$emit('send-answer', {answer: this.answer, index: index});
  },
}

On parent:

<question v-for="(question,index) in questions"
                    :questionText="question.questionText"
                    :question-index="++index"
                    @send-answer="getAnswer"> </question>
    getAnswer(e) {
      this.answers[e.index] = e.answer;
    }

answered Dec 23, 2018 at 22:46

erinc

2673 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access child component data in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related