uniapp项目答题的正确判断

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第22天，点击查看活动详情

上一篇文章中我们把题目数组中的第一个题目以及他的对应的四个选项渲染到了页面上了，接下来就是判断用户选择的选项是否和我们数据里的选项一致了。

• 这里u-radio的源代码自己带了两个方法来获取用户点击的选项的内容，然后他会打印到控制台，我们只需要通过if判断用户选择的是否和答案一致就行了，u-raiod部分的具体代码如下所示：

<u-radio-group placement="column" @change="groupChange">
      <u-radio
        :customStyle="{ marginBottom: '40px' }"
        v-for="(item, index) in subject[num].options"
        :key="index"
        :label="item.code + item.option"
        :name="item.code"
        labelSize="20px"
        iconSize="25px"
        size="30px"
        :activeColor="color"
      >
      </u-radio>
    </u-radio-group>

• 这里的groupChange方法传入的n就是用户点击的时候的选项号即ABDC这些，我们需要在methods里面获取到这个n,然后将他和this.subject[0].answer进行比较就行了，如果为true，则很多东西要变化，比如说选项按钮要变为主题色青色，题目的序号要加一,进度条要加10，按钮要禁用，disabled变为false,然后还要执行积分加5这个方法改变vuex里面的数值，最后使用消息提示的api,就是uni.showToast来提示用户答对了，积分加5，如果没有答对，按钮颜色变为红色，通过uni.showToast提示用户答错了哦，并且题目号进度条这些不会变化，具体的groupChange的判断代码如下所示：

groupChange(n) {
      if (n == this.subject[this.num].answer) {
        this.color = "#34e2a3";
        this.num += 1;
        this.count += 10;
        this.disabled = false;
        this.$store.commit("addCount");
        uni.showToast({
          title: "答对了，积分+5",
        });
      } else {
        this.color = "red";
        uni.showToast({
          title: "错了哦！",
          icon: "error",
        });
      }
      if (this.num == 9) {
        this.show = true;
      }
    },