Nuxt.js：方法中的迭代会导致问题

Question

点击事件触发后，我尝试迭代特定数组的长度。数组中的每一项都通过 v-if 语句链接到一个 HTML 元素。当数组中的相应项设置为 true 时，将显示元素。

点击后，元素并没有显示出来，仔细观察后，数组看起来像这样：

visibleQuestions: [ null, null, null, true ]

在这种情况下，需要显示 3 个问题。

我该如何解决这个问题？相关的代码是这样的：

<template>
    <fieldset v-for="(item, questionIndex) in questions" v-if="visibleQuestions[questionIndex]">
        ....
    </fieldset>
    <button @click="showAll(questions.length)">Show all</button>
</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 {
                visibleQuestions: []
            }
        },
        methods: {
            showAll: function(questionAmount) {
                for (let i = 0; i < questionAmount; i++) {
                    this.$set(this.visibleQuestions, questionAmount, true);
                }
            }
        }
    }
</script>

Answer 1

在Vue.set调用showAll方法中将questionAmount更改为i：

       showAll: function(questionAmount) {
            for (let i = 0; i < questionAmount; i++) {
                this.$set(this.visibleQuestions, i, true);
            }
        }