How to use ternary operator to set radio input attribute in Vue.js

Question

Is there a way to write ternary operator in Vue.js to set the state of a radio button? Right now I have v-if/v-else-if/v-else to display 3 types of radio buttons inside of a label. I'd like to somehow use a ternary operator to set an attribute of checked or disabled depending on if the current input is correct, incorrect, or a plain answer. I plan to use a ternary operator on to set the class of the input as well but that won't matter unless I can set a checked/disabled attribute on each input according to whether or not the answer is correct, incorrect, or a plain answer.

<label class="form-check-label" 
    v-bind:style="
    (!question.Correct && question.AnswerGiven==(index+1)) ? wrongAnswer 
        : (!question.Correct && question.CorrectAnswer == (index+1)) ? rightgAnswer 
        :   plainAnswer">

        <!-- Wrong Answer -->
        <input type="radio" v-if="!question.Correct && question.AnswerGiven==(index+1)"
            v-on:input="changed(question.Question.ID,index)" 
            v-bind:class="{wrongAnswerInput: !question.Correct && question.AnswerGiven==(index+1)}"
            class="form-check-input" 
            :value="index" 
            :name="question.Question.ID" 
            checked>

        <!-- Correct Answer -->
        <input type="radio" v-else-if="!question.Correct && question.CorrectAnswer == (index+1)"
            v-on:input="changed(question.Question.ID,index)" 
            v-bind:class="{correctAnswerInput: !question.Correct && question.CorrectAnswer == (index+1)}"
            class="form-check-input" 
            :value="index" 
            :name="question.Question.TestSharedID" 
            checked>

        <!-- Plain Answer -->
        <input type="radio" v-else
            v-on:input="changed(question.Question.ID,index)" 
            class="form-check-input" 
            :value="index" 
            :name="question.Question.TestSharedID" 
            disabled>
            {{answer}}
</label>

UPDATED CODE BELOW So this is what I've refactored it to.. but not sure if i've been staring at it too long but assign the correct classes is happening to each input element but now it's not disabling the normal inputs. Right now on load it is pre-checking an incorrect answer which is what I want but it isn't disabling normal inputs nor is it pre-checking the correct answer.

<label class="form-check-label" 
    v-bind:style="
    (!question.Correct && question.AnswerGiven==(index+1)) ? wrongAnswer 
        : (!question.Correct && question.CorrectAnswer == (index+1)) ? rightgAnswer 
        :   plainAnswer">
        <!-- Wrong Answer -->
        <input type="radio"
            v-on:input="changed(question.Question.ID,index)" 
            v-bind:class="
            (!question.Correct && question.AnswerGiven == (index+1)) ? wrongAnswerInput
            : (!question.Correct && question.CorrectAnswer == (index+1)) ? correctAnswerInput
            :   plainAnswer"
            class="form-check-input" 
            :value="index" 
            :name="
            (!question.Correct && question.AnswerGiven == (index+1)) ? question.Question.ID
            : (!question.Correct && question.CorrectAnswer == (index+1)) ? question.Question.TestSharedID
            : question.Question.TestSharedID" 
            :checked="isChecked"
            :disabled="isDisabled">
            {{answer}}
</label>

And the computed property is as follows...

    isDisabled() {
        let questions = this.reviewPanel.Questions
        for (let i = 0; i < questions.length; i++) {
            for (let j = 0; j < questions[i].Question.AnswerChoices.length; j++) {
                if(questions[i].Correct) {
                    return true
                }
            }
        }
    },
    isChecked() {
        let questions = this.reviewPanel.Questions

        for (let i = 0; i < questions.length; i++) {
            for (let j = 0; j < questions[i].Question.AnswerChoices.length; j++) {
                if(!questions[i].Correct && questions[i].CorrectAnswer == (j+1) || !questions[i].Correct && questions[i].AnswerGiven == (j+1)) {
                    return true
                }
            }
        }
    }

tony19 · Accepted Answer · 2022-07-15 00:43:11Z

0

You can just pass conditions to :checked or :disabled and reuse everything else.

<input type="radio"
       v-on:input="changed(question.Question.ID,index)" 
       v-bind:class="{wrongAnswerInput: !question.Correct && question.AnswerGiven==(index+1)}"
       class="form-check-input" 
       :value="index" 
       :name="question.Question.ID" 
       :checked="isChecked"
       :disabled="isDisabled"
>

isChecked and isDisabled could be computed properties for example. Or you can write conditions directly in template.

Ternary could be used too if you really want it (but I believe that you don't need it here), e.g.

<input type="radio"
       :disabled="someCondition ? someAnotherCondition : yetAnotherCondition"
>

3 Comments

Doolan Over a year ago

Oh i didn't even think of that (obviously). I'll get back with details.

Doolan Over a year ago

would you mind taking a look at the updated answer question?

Maksim Nesterenko Over a year ago

@DylanNguyen it's quite hard to read because of huge conditions right in template. Consider to define some states for your input as computed, something like isCorrect, isWrong and use them to bind classes and styles. vuejs.org/v2/guide/class-and-style.html#Object-Syntax About behavior, I think I have nothing to add here. Passing boolean values to props must just work, recheck your conditions and which results they return.

Collectives™ on Stack Overflow

How to use ternary operator to set radio input attribute in Vue.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related