Question

在触发click事件后，我尝试遍历特定数组的长度。数组中的每个项目都使用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

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

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

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

1 个答案: