Question

是否可以在Vue.js中编写三元运算符来设置单选按钮的状态？现在，我可以使用v-if / v-else-if / v-else在标签内显示3种单选按钮。我想以某种方式使用三元运算符来设置checked或disabled的属性，具体取决于当前输入是否正确，不正确或简单答案。我计划也使用三元运算符来设置输入的类，但这无关紧要，除非我可以根据答案是否正确，不正确或简单地在每个输入上设置一个选中/禁用的属性答案。

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

下面的更新代码 因此，这就是我将其重构为的内容。.但是不确定我是否盯着它看了太长时间，但是为每个输入元素分配了正确的类，但是现在它并没有禁用正常的输入。现在，在加载时，它正在预先检查我想要的错误答案，但它不会禁用正常输入，也不会预先检查正确答案。

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

计算出的属性如下...

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

Answer 1

您可以将条件传递给：checked或：disabled，然后重用其他所有内容。

<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和isDisabled可以是计算属性。或者，您可以直接在模板中编写条件。

如果您确实想要三元组，也可以使用它（但我相信您在这里不需要它），例如

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

另请参阅：

如何在Vue.js中使用三元运算符设置单选输入属性

1 个答案: