Ionic Vue离子模板逻辑在异步方法内分配数据时获取空数据对象

vjrehmav  于 2022-12-09  发布在  Ionic
关注(0)|答案(2)|浏览(114)

UPDATE找到解决方案,但我不明白原因。请解释。
原始问题我有一个Vue / Ionic项目,这让我很不爽。

我尝试使用下面的代码,但是当我尝试在async method中为某个data赋值时,问题就出现了。
看起来赋值是正确的,但是模板中的一些元素找不到嵌套级别0以上的内容,如下图所示。如果我尝试访问object属性,则object看起来是null,而不是空值。

<template>
    <h6>{{proyectos}}</h6> <!--THIS WORKS OK-->
    <!-- <h6>{{proyectos[0]}}</h6> THIS DOESN'T -->
    <!-- <h6 v-if='proyectos[0]'>hola</h6> NEITHER THIS-->
    <div
        v-for='proyecto in proyectos'
        :key='proyecto.id'
    >
        <h3>{{proyecto.id}} - {{proyecto.nombre}}</h3>
    </div>
</template>

<script>
export default {
    data(){
        return{
            proyectos: null,
        }
    },

    methods: {  
        async misproyectosIniciar(){
            await this.$store.dispatch('actObtenerProyectos'); //REQUIRES AWAIT
        },

        obtenerProyectos(){
            return this.$store.getters.proyectos;
        },
    },

    async beforeMount(){
        await this.misproyectosIniciar();
        this.proyectos = this.obtenerProyectos();
        console.log('proyectos', this.proyectos);
        console.log('proyectos[0]', this.proyectos[0]);
    },
};
</script>

我去除了所有的离子成分,因为它总是给我带来问题。
如果我只使用v-for,一切都工作正常。

如果我取消注解代码顶部的两行代码中的任何一行({{}}v-if),就会出现错误。

**我不知道为什么会发生这种情况,请提供任何线索?**注意:它需要await,因为是数据库查询。

93ze6v8z

93ze6v8z1#

该对象看起来为null,但实际上并不为null
这不是真的。在一开始,你的属性值确实是null。假设你的查询需要大约1 sek来获取数据,所以只有在1 sek之后你才给它赋值,然后它就不再是null了。
因此,在本例中,您的值为1 sek,null
看,async / await不会同步执行代码。
假设您的数据库调用需要大约1秒钟来检索一些数据。
当代码提取数据时,vue尝试呈现v-for,但值为null,因为数据是在后台提取的。
此外,总是(几乎总是)用[]初始化数组,而不是用undefinednull或其他东西。
[]的工作原理如下:
null不起作用,因为您基本上尝试了以下操作:

null.forEach(() => {})

您基本上尝试在null上循环,如果您了解javascript,您将知道这是行不通的。
但如果用[]初始化它,实际上可以循环,即使其中没有任何内容

[].forEach(() => {})
c86crjj0

c86crjj02#

显然我只是需要换个衣服

data(){
    return{
        proyectos: null,
    }
},

data(){
    return{
        proyectos: [],
    }
},

相关问题