CODEWITHSUNDEEP
javascriptvue.jsfirebase-realtime-database
erinc
erinc

Reputation: 267

How to access child component data in Vue

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?

Upvotes: 3

Views: 973

Answers (1)

erinc
erinc

Reputation: 267

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

Upvotes: 1

Related Questions