How to pass data (emit)

Hi i have one question which may be sounds stupid, actually i haven't made any components just doing in same file. Here i'm making a Quiz app. in the last part in postUserChoice() method i want to pass current user choice question and user choosen answer(choice). I can easily pass question because postUserChoice is with in the question div but

where i have loop the answer finish before the next() method(Next Button) div.


<div v-for="(question, index) in questions">
                            <!-- Hide all questions, show only the one with index === to current question index -->
                            <div v-show="index === questionIndex">
                                <strong>{{ question.name }}</strong>
                                <ol>
                                  
                                    <li v-for="choice in question.answers">
                                        <label>
                                            
                                <input type="radio"
                                :value="choice.is_correct == true ? true : choice.answer"
                                :name="index"
                                v-model="userResponses[index]"
                                @click="choices(question.id,choice.id);answeremit(choice)"> 
                                {{choice.answer}}
                                
                                        </label>
                                    </li>
                                </ol>
                                <!-- The two navigation buttons -->
                                <!-- Note: prev is hidden on first question -->
                                <div class="pull-right">
                                    <button class="btn btn-success" v-if="questionIndex > 0" @click="prev">
                                        <span class="glyphicon glyphicon-arrow-left"></span>
                                        prev
                                    </button>
                                    <button class="btn btn-success" 
                                    @click="next(); postUserChoice(question,choice)">
                                        <span class="glyphicon glyphicon-arrow-right"></span>
                                        next
                                    </button>
                                </div>

                            </div>
                              
                        </div>

This is how i want to get current question and user choosen answer. But how can i get choice(answer user choosed)


postUserChoice(question,choice){
                this.answerQuestion.push({
                    answer:choice,
                    question:question
                })
            }

This is the error


Property or method "choice" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

bobbybouwmann

6 years ago

Level 88

Well the error already says what you need to do. You can't pass in a variable that hasn't been defined before rendering. What you normally do is create an array of choices and send the index or key of that array to the method. Then you can use the index or key to retrieve the correct answer.

david001

6 years ago

Level 5

Thanks for idea

Please or to participate in this conversation.