如何让选择不正确的显示红色

Question

如何让选择的结果与答案不匹配的显示红色，其他未选择的正常显示，如上图示例所示

Answer 1

<template>
  <div class="">
    <ul v-for="item in list" :key="item.id" class="list">
      <li>{{item.question}}</li>
      <p>
        <el-radio :class="{error: item.answer !== item.right}" :disabled="item.answer == 'false'" v-model="item.answer" label="true">正确</el-radio>
        <el-radio :class="{error: item.answer !== item.right}" :disabled="item.answer == 'true'" v-model="item.answer" label="false">错误</el-radio>
      </p>
      <p>答案应该是：{{item.right === 'true' ? '正确':'错误'}}</p>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list:[
        {id:1,question:'太阳会发光',answer:'true',right:'true'},
        {id:2,question:'1+1=3',answer:'false',right:'false'},
        {id:3,question:'18岁是成年人',answer:'false',right:'true'},
      ]
    }
  },
}
</script>

<style scoped lang="scss">
.list{
  text-align: left;
}
::v-deep .error{
  .el-radio__input.is-checked+.el-radio__label{
    color: #f00;
  }
  .el-radio__input.is-checked .el-radio__inner{
    border-color: #f00;
    background: #f00;
  }
}
</style>

如有帮助，请点击采纳↓↓哦！