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

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

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