Javascript 小测验不是被动的

我正试着做一个小测验，但效果不太好

当我单击“提交”时，我想突出显示一个问题，这个问题在Vue类绑定中被证明是错误的。然而，似乎在我实际提交表单的那一刻，类绑定根本不是被动的

只有当我改变某种价值观时，它才会起作用

我制作了一个屏幕录制，显示了我的意思：

相关代码如下所示：

<template>
  <form @submit.prevent="handleSubmit">
    <fieldset v-for="(item, questionIndex) in questions" :key="questionIndex">
      <legend :class="{ wrong: isFalse[questionIndex] }">{{ item.question }}</legend>
    </fieldset>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
    export default {
        asyncData(context) {
            return context.app.$storyapi.get('cdn/stories', {
                version: 'draft',
                startsWith: '/subjects/biology/hl/1999-may'
            }).then(response => {
                console.log(response.data.stories[0].content.question);
                return {
                    questions: response.data.stories[0].content.question
                }
            });
        },
        data() {
            return {
                choices: [],
                isFalse: []
            }
        },
        methods: {
            handleSubmit() {
                for (let i in this.choices) {
                    if (this.choices[i] === this.questions[i].answer) {
                        this.isFalse[i] = false;
                    } else {
                        this.isFalse[i] = true;
                    }
                }
            }
        }
    }
</script>


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

{{item.question}}
提交
导出默认值{
异步数据（上下文）{
返回context.app.$storyapi.get（'cdn/stories'{
版本：“草稿”，
以“/subjects/biology/hl/1999-may”开头
})。然后（响应=>{
console.log（response.data.stories[0].content.question）；
返回{
问题：response.data.stories[0]。content.question
}
});
},
数据（）{
返回{
选择：[]，
isFalse:[]
}
},
方法：{
handleSubmit（）{
for（让我加入这个.choices）{
if（this.choices[i]==this.questions[i].答案）{
this.isFalse[i]=false；
}否则{
this.isFalse[i]=true；
}
}
}
}
}
.错了{
颜色：红色；
}

这是阵列反应性的工作方式。请阅读中的“注意事项”部分

要修复此问题，您需要使用/

---

这就是阵列反应性的工作原理。请阅读中的“注意事项”部分

要修复此问题，您需要使用/

this.$set(this.isFalse, i, false)