Question

我有这个组件

<template>

    <div class="list-group">
        <div v-for="user in data">
            <!-- omitted for brevity -->
        </div>
    </div>

</template>


<script>

    export default ("users-list", {
        props: ['users']
        ,

        data() {
            return {
                data: this.users
            }
        }
    });

</script>

此组件用于另一个组件，它使用$ .ajax（Promise）获取数据并设置数据

<template>
    <div>
        <users-list v-bind:users="users"></users-list>
    <div>   
</template>


<script>

    import UsersService from './users.service.js';
    import UsersList from './users.list.vue';


 export default ('users-main', {
        components: {
            'users-list': UsersList
        },
        mounted() {
            this.refresh();
        },
        data() {
            return {
                data: null,
                message: null,
                user: null
            }
        },
        methods: {
            refresh() {
                let service = new UsersService();
                service.getAll()
                    .then((data) => {
                        this.data = data;

                    })
                    .catch((error) => {
                        this.message = error;
                    })

            },
            selected(user) {
                this.user = user;
            }
        }
    });

</script>

这是UsersService

import $ from 'jquery';

export default class UsersService {
    getAll() {

        var url = "/Api/Users/2017";

        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                success(data) {
                    resolve(data);
                },
                error(jq, status, error){
                    reject(error);
                }

            });
        });
    }
}

正如您所看到的那样，如果我更改了

，服务将使用Promise获取数据

<div v-for="user in data">

进入该属性，我可以看到用户

<div v-for="user in users">

问题：如何将异步道具值传递给组件？

Answer 1

您可以在 users-list 中将数据设置为“onInit”一次。对于反应，你可以做

Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document;
    name="=?UTF-8?Q?=D7=A2=D7=A8=D7=9B=D7=AA=20=D7=94=D7=A8=D7=A9=D7=9E=D7=94=20TCMP.docx?="
Content-Transfer-Encoding: base64
Content-Disposition: attachment;
    filename=?UTF-8?Q?=D7=A2=D7=A8=D7=9B=D7=AA=20=D7=94=D7=A8=D7=A9=D7=9E=D7=94=20TCMP.docx?=

或

computed:{
   data(){ return this.users;}
}

Answer 2

你是什么意思：

正如您可以看到服务使用Promise获取数据，如果我更改

<div v-for="user in data">

进入该属性，我可以看到用户

<div v-for="user in users">

使用<div v-for="user in users">应该有效，那么问题是什么？

道具异步时，Vue组件未更新

2 个答案: