Vue récupérer response.json promettre de ne pas créer des getters réactifs

Question

J'ai une application Vue écrite avec Typescript et j'utilise Fetch pour récupérer des données d'une API. Dans l'un de mes composants je l'interface suivante définie:

interface SearchResult { 
    device_id: string; 
    location: string; 
    sub_location: string; 
    status: string; 
} 

Dans mon Fetch méthode que je jetai l'response.json() promesse d'un tableau de l'interface SearchResult comme ceci:

fetch(url).then(response => response.json() as Promise<SearchResult[]>) 
      .then(data => { 
       this.results = data; 
      }) 

Le problème que j'ai, si 'status' n'est pas inclus dans response.json(), aucun getter réactif n'est créé pour this.results.status, ce qui signifie que je ne peux pas muter les données et le faire réagir sur la page.

J'ai essayé de définir manuellement la valeur de 'status' après la ligne this.results = data, et quand j'inspecte l'objet en utilisant VueTools je peux voir qu'il a la propriété status avec la valeur que je lui ai assignée. Mais le getter réactif et le setter sont toujours manquants.

J'ai également essayé de changer l'interface en classe avec un constructeur qui a défini une valeur par défaut pour 'status', mais cela n'a pas réussi non plus à créer le getter et le setter réactifs pour la propriété.

Comment puis-je créer les getters et setters réactifs sans ajouter explicitement 'status' (ou toute autre propriété arbitraire) à la réponse api?

Answer 1

Vue cannot detect propriétés ajoutées à un objet qui a déjà été ajouté à des données sauf si vous ajoutez la propriété via $set.

Changer votre réponse à chercher:

fetch(url) 
    .then(response => response.json() as Promise<SearchResult[]>) 
    .then(data => { 
    this.results = data; 
    for (let result of this.results) 
     this.$set(result, 'status', "some value"); 
    }) 

Bien que vous devriez aussi être en mesure de sortir avec:

fetch(url) 
    .then(response => response.json() as Promise<SearchResult[]>) 
    .then(data => { 
    this.results = data.map(d => d.status = "some value"); 
    })