javascript - 小测验没有反应

我正在尝试做一个小测验，但是效果不是很好。

当我单击“提交”时，我想强调一个问题，该问题在Vue类绑定中被证明是错误的。但是，似乎在我实际提交表单的那一刻，类绑定完全没有反应。

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

我做了一个屏幕录像，显示了我的意思：
https://vimeo.com/280435360

相关的代码段是这样的：

<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>

最佳答案

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

要解决此问题，您需要使用Vue.set / vm.set

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

关于javascript - 小测验没有反应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51390195/