Question

我的Vue应用程序中有一个奇怪的问题。该组件如下所示：

...
<template v-for="foo in foos">
   <Elm v-if="foo.visible" :key="foo.label" :bar="foo" />
</template>
...

“ Elm”是对象中的值，可从JSON文件中检索。如果我在本地获取JSON文件，则该组件是反应性的：

<script>
    import datas from "datafile.json";
    ...
    methods: {
        fillFoos() {
            datas.forEach(data => {
               this.foos.push(data)
            })
        }
    },
    mounted: {
        this.fillFoos()
   }
   ...
</script>

但是当我使用fetch远程检索文件时，该组件不再是反应性的，并且在foo.visible值更改时也不再消失：

<script>
    methods: {
        getDataFromApi() {
            return new Promise((resolve, reject) => {
                fetch(this.apiUrl)
                .then(response => {
                    return response.json();
                })
                .then(jsonResponse => {
                    resolve(jsonResponse);
                })
                .catch(e => {
                    ...
                })
            })
        },
        fillFoos() {
            this.getDataFromApi()
            .then(response => {
                response.forEach(data => {
                    this.foos.push(data);
                });
            });
        }
    },
    mounted: {
        this.fillFoos()
    }
    ...
</script>

在两种情况下，“ foos”数组均已正确填充，唯一的区别是第二种情况下v-if指令似乎已损坏。更准确地说，显示是在初始化时正确完成的（所有元素的foo.visible为true，并且都已显示），但是在以后更改foo.visible值的情况下，它们不会消失。

我找不到问题所在...

Answer 1

我认为您遇到的问题是方法getDataFromApi返回了一个承诺，但是当您在fillFoos中使用它时，承诺就没有被等待，而是您调用forEach它。

您需要使用getDataFromApi().then(x => {})语法来解决承诺，或者可以使用async await。

您可以尝试这样的事情

methods: {
    async getDataFromApi() {
        const response= await fetch(this.apiUrl);
        return response.json();
    },
    async fillFoos() {
        try {
            await foos = this.getDataFromApi();
            this.foos = foos;
        } catch(error) {
            //handle error.
        }
    }
}

Answer 2

某人昨天在解决方案附近发布了一个回复，但将其删除了，我不知道为什么。问题是我将提取响应存储在数据部分的变量中，然后用它来填写“ foos”表

data: function() {
    return {
        dataFromApi: null
    }
}

通过删除此变量，并在获取后立即创建它，一切正常。...我未指定我将答案存储在此变量中，因为我认为它可能不相关。 ..道德：始终指定所有内容！

使用Fetch检索数据时，Vue JS组件不起作用

2 个答案: