소품이 비동기일 때 Vue 구성 요소가 업데이트되지 않음

소품이 비동기일 때 Vue 구성 요소가 업데이트되지 않음

이 컴포넌트가 있습니다.

<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(약속)로 데이터를 가져오고 데이터를 설정합니다.

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

이것이 Users Service 입니다.

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

질문:.비동기 소품 값을 컴포넌트에 전달하려면 어떻게 해야 합니까?

사용자 목록에서 데이터를 "onInit"로 한 번 설정합니다.리액티브성을 위해

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

또는

watch: {
    users(){
    //do something
    }
}

무슨 뜻입니까?

보시다시피 Promise로 데이터를 얻습니다.

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

사용자들을 볼 수 있습니다.

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

사용하다<div v-for="user in users">작동해야 하는데 뭐가 문제죠?

언급URL : https://stackoverflow.com/questions/44154120/vue-component-not-updated-when-props-are-async