'lightning-radio-group in LWC
I am trying to build the quiz app in LWC. this is the array in the controller file. User should get the question and select one answer via radio button.
quizList = [
{
id: "Question1",
question : "Which one of the following is not a template loop?",
answers: {
a:"for loop",
b:"iterator",
c: "Map Loop"
},
correctAnswer: "c"
},
{
id: "Question2",
question : "Which of the file is invalid in LWC component folder?",
answers: {
a:".svg",
b:".apex",
c: ".js"
},
correctAnswer: "b"
},
{
id: "Question3",
question : "Which one of the following is not a directives?",
answers: {
a:"for:each",
b:"if:true",
c: "@track"
},
correctAnswer: "c"
}
]
I am not able to understand how can I map option and value for the radio button in the html file.
I am able to map the question but answers are not coming in the radio button.
<lightning-radio-group name="quizquestion"
label={quiz.question}
options={quiz.question.answers}
value={quiz.question.answers}
type="radio"></lightning-radio-group>
current output
Solution 1:[1]
try printing questions with template iterator.
> <template for:each={quizList} for:item="currItem">
> > <p key={currItem.id}> {currItem.question}</p> //this is for question
> > <lightning-radio-group
key={q.id}
options={q.answers}
value={q.answers}
onchange={handleChange}
type="radio"></lightning-radio-group>
</template>
for more details https://github.com/Ronak-Toshniwal/QuizApp-in-LWC-With-Validation
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | RONAK TOSHNIWAL |