答题卡显示问题

Question

点击下一题之后调用接口生成一个新的题目，我想根据那个输入框是否输入来改变右边答题卡的样式，但是我现在写了之后全都亮了，怎样才能让它做一个亮一个？

<div class="case_topic">
        
        <div class="case_topic_right">
          <span class="case_topic_lest">1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ oneknow.item
          }}<span style="font-size: 14px; color: #999"
            >({{ oneknow.score }}分)</span
          >
        </div>
        <div class="case_topic_know">
          <el-input
            v-model="reply"
            type="textarea"
            :rows="5"
            resize="none"
            placeholder="请在此处输入你的答案..."
            @change="changeHandler()"
          >
          </el-input>
        </div>
        <div class="case_topic_bottom" v-show="this.haslook == 1">
          <p
            class="case_topic_next"
            
            @click="relativequestion()"
          >
            上一题
          </p>
          <p
            class="case_topic_next1"
            @click="nextquestion()"
          >
            下一题
          </p>
          <p
            class="case_topic_next2"
            v-show="this.haslook == 2"
            @click="submit()"
          >
            提交
          </p>
        </div>
        <div class="case_topic_bottom" v-show="this.haslook == 2">
          <p
            class="case_topic_next"
            
            @click="relativequestion()"
          >
            上一题
          </p>
          <p
            class="case_topic_next1"
            @click="submit()"
          >
            提交
          </p>
         
        </div>
</div>

这个是答题卡的代码

<ul class="case_main_right">
      <li v-for="(item,index) in knowlist" :key="index" v-show="hasexam == 1">
        <div  :class=" reply != null && reply != '' ? 'active' : 'case_main_right_num' ">{{index+1}}</div>
        <div  :class="reply != null && reply != '' ? 'active1' : 'case_main_right_box'"></div>
      </li>
</ul>

刚进来页面的时候只显示一个题

getapp() {
      this.axios
        .studentLookKnowQuestions({
          trainId: this.trainId,
          userId: this.user_id,
        })
        .then((res) => {
          if (res.data.code == 101) {
              //题的数据
              this.oneknow = res.data.data.knowledgeCase;
            }
          }
        })
        .catch((err) => {});
    },

然后点击上一题和下一题调用接口

//下一题
    nextquestion() {
      // if (this.active++ > 2) this.active = 0;
      this.oneknow.reply = this.reply;
      if (this.reply == "") {
        this.$message({
          type: "info",
          message: "请输入内容 ！",
        });
      } else {
        this.axios
          .studentNextKnowQuestions({
            trainId: this.trainId,
            userId: this.user_id,
            knowledgeCase: this.oneknow,
          })
          .then((res) => {
            this.getapp();
            this.reply = "";
          })
          .catch((err) => {});
      }
    },
    //上一题
    relativequestion() {
      
      if ((this.oneknow.id == this.knowlist[0].id)) {
        this.$message({
          type: "info",
          message: "没有更多题了！",
        });
      } else {
        for (let i = 0; i < this.knowlist.length; i++) {
          if (this.knowlist[i].id == this.oneknow.id) {
            this.id = this.knowlist[i - 1].id;
            this.axios
              .studentRelatKnowQuestions({
                trainId: this.trainId,
                userId: this.user_id,
                id: this.id,
              })
              .then((res) => {
                this.oneknow = res.data.data.knowledgeCase;
                this.reply = res.data.data.knowledgeCase.reply;
                this.haslook=res.data.data.knowledgeCase.num;
              })
              .catch((err) => {});
          }
        }
      }
    },

Answer 1

https://codepen.io/1567887123...

<a href="https://segmentfault.com/q/1010000041456189">https://segmentfault.com/q/1010000041456189</a>

<div id="array-with-index">
  <div class="case_topic demo">
    <div class="case_topic_right">
      <span class="case_topic_lest">{{index+1}}</span>{{ oneknow.questionDescribe
          }}<span style="font-size: 14px; color: #999">({{ oneknow.score }}分)</span>
    </div>
    <div class="case_topic_know">
      <input v-model="oneknow.describe" placeholder="请在此处输入你的答案..." @change="changeHandler()">
      </input>
    </div>
    <div class="case_topic_bottom">
      <p class="case_topic_next" @click="relativequestion()" v-show="index != 0">
        上一题
      </p>
      <p class="case_topic_next1" @click="nextquestion()" v-show="index != knowlist.length-1">
        下一题
      </p>
      <p class="case_topic_next2" @click="submit()">
        提交
      </p>
    </div>
  </div>
  <ul class="case_main_right">
    <li v-for="(item,index) in knowlist" :key="index">
      <div>{{index+1}}</div>
      <div v-show="item.describe">已答题</div>
    </li>
  </ul>
</div>

Vue.createApp({
  data() {
    return {
      index: 0,
      hasexam: "1",
      reply: "",
      haslook: "",
      oneknow: {
        //当前题目
        score: "0",
        questionDescribe: "", //题目描述
        describe: "" //答案描述
      },
      knowlist: [
        {
          //题目列表
          score: "10",
          questionDescribe: "题目11111", //题目描述
          describe: "" //答案描述
        },
        {
          score: "10",
          questionDescribe: "题目2222", //题目描述
          describe: "" //答案描述
        },
        {
          score: "10",
          questionDescribe: "题目3333", //题目描述
          describe: "" //答案描述
        }
      ]
    };
  },
  mounted() {
    // 初始化第一个题目。
    this.index = 0;
    this.getOneknow();
  },
  methods: {
    getOneknow() {
      // 获取题目。
      this.oneknow = this.knowlist[this.index];
    },
    changeHandler() {},
    relativequestion() {
      //上一个减一
      this.index = this.index - 1;
      this.getOneknow();
    },
    nextquestion() {
      //下一个加一
      this.index = this.index + 1;
      this.getOneknow();
    },
    submit() {}
  }
}).mount("#array-with-index");