Vue Komponente nicht aktualisiert, wenn Requisiten sind async

Question

ich diese Komponente haben

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

Diese Komponente von einer anderen Komponente Hexe verwendet wird, um Daten mit $ Schnipsel (Versprechen) erhalten und stellen Sie die Daten

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

und dies ist die 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); 
       } 

      }); 
     }); 
    } 
} 

Wie Sie den Service mit Promise bekommen alle Details einsehen können, wenn Ich wechsle

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

in das Eigentum, kann ich die Benutzer

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

Frage sehen: Wie ich async Requisiten Wert auf die Komponenten passieren kann?

Answer 1

Sie setzen Daten einmal "onInit" in Benutzer-Liste. Für Reaktivität können Sie tun

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

oder

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

Answer 2

Was meinen Sie:

Wie Sie den Service erhalten Daten mit Versprechen sehen können, wenn ich

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

in die Eigenschaft zu ändern, ich das sehen kann Benutzer

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

Verwenden Sie <div v-for="user in users"> sollte funktionieren, was ist das Problem?