怎样实现选择答案，答题卡样式改变？

Question

就像这样，在左边选择答案，右边答题卡相应的题号的样式改变？

题目代码

<div v-for="list1 in list.optionsList" :key="list1.id">
            <el-radio-group v-model="answer[index]" class="radio_option"
            @change="onChange(list1)">
              <el-radio :label="list1.key" 
              v-model="answer[index]"
              class="radio_option_alone">
                {{ list1.title }} {{ list1.key }}
              </el-radio>
            </el-radio-group>
          </div>

答题卡代码

<!-- 答题卡 -->
    <div class="Scantron">
      <p class="Scantron_top">答题卡</p>
      <div class="Scantron_title">
        <p class="title_one">RART01:单选题</p>
        <p class="title_two">( 共10题，合计30分 )</p>
      </div>
      <ul class="Scantron_option" v-if="paper.singleLists">
        <li v-for="(li, index) in paper.singleLists.length" :key="index">
          {{ index + 1 }}
        </li>
      </ul>
      <div class="Scantron_title">
        <p class="title_one">RART02:多选题</p>
        <p class="title_two">( 共10题，合计30分 )</p>
      </div>
      <ul class="Scantron_option" v-if="paper.multipleLists">
        <li v-for="(li, index) in paper.multipleLists.length" :key="index">
          {{ index + 1 }}
        </li>
      </ul>
      <div class="Scantron_title">
        <p class="title_one">RART03:判断题</p>
        <p class="title_two">( 共05题，合计10分 )</p>
      </div>
      <ul class="Scantron_option" v-if="paper.judgeLists">
        <li v-for="(li, index) in paper.judgeLists.length" :key="index">
          {{ index + 1 }}
        </li>
      </ul>
      <div class="Scantron_title">
        <p class="title_one">RART04:简答题</p>
        <p class="title_two">( 共05题，合计10分 )</p>
      </div>
      <ul class="Scantron_option" v-if="paper.shortLists">
        <li v-for="(li, index) in paper.shortLists.length" :key="index">
          {{ index + 1 }}
        </li>
      </ul>

    </div>

Answer 1

<style>
.active{
color: red;
}
</style>

:class="{active: answer[index] != null}"

<ul class="Scantron_option" v-if="paper.singleLists">
        <li v-for="(li, index) in paper.singleLists.length" :key="index" :class="{active: answer[index] != null}">
          {{ index + 1 }}
        </li>
      </ul>

Answer 2

用样式不就好了：:class="{active: li.value !== null}"