Ajout dynamique d'éléments à la fin d'un tableau

Question

Nouveau sur Vuejs, vous avez une question sur la mise à jour d'un tableau.

C'est mes données (status_arr):

{ 
    "Approvals": [ 
     { 
      "name": "Section 1", 
      "count": 10692 
     } 
    ], 
    "Declines": [ 
     { 
      "name": "Section 1", 
      "count": 1212 
     }, 
     { 
      "name": "Section 2", 
      "count": 5 
     } 
    ] 
} 

je dois ajouter une "Pending" partie des données ci-dessus dynamiquement. Je ne comprends pas très bien la méthode $set sur la façon d'accomplir cela. Je dois ajouter à l'ensemble de données ci-dessus sans affecter le reste des données.

La documentation dit à utiliser:

this.$set(status_arr, itemIndex, [ { 'name': 'Section 1', 'count': 0 } ]); 

Je ne sais pas comment ajouter la partie Pending avec les données jointes et si j'ajoute au tableau, comment il a un itemIndex pour moi de le faire ? Y at-il une fonction this.$add ou quelque chose qui fonctionne comme un pop()?

Merci pour toute aide!

Answer 1

Si je comprends bien votre question, vous voulez

this.$set(this.status_arr, 'Pending', [{ 
    name: 'Section 1', 
    count: 0 
}]) 

Answer 2

Vous pouvez modifier status_array à ceci:

{ 
    "Approvals": [ 
     { 
      "name": "Section 1", 
      "count": 10692 
     } 
    ], 
    "Declines": [ 
     { 
      "name": "Section 1", 
      "count": 1212 
     }, 
     { 
      "name": "Section 2", 
      "count": 5 
     } 
    ], 
    "Pending": [] 
} 

Et quand vous voulez ajouter l'article à l'attente, vous pouvez utiliser :

status_array.Pending.push(newEle) 

Rappelez-vous, Vue enveloppe les méthodes de mutation d'un tableau observé. ils déclencheront également des mises à jour de vue. Les méthodes enveloppées sont:

• push()
• pop()
• shift()
• unshift()
• épissure() de tri
• ()
• inverse()

Answer 3

Vue ne permet pas l'ajout dynamique de nouvelles racines réactives propriétés à une instance déjà créée. Cependant, il est possible d'ajouter des propriétés réactives à un objet imbriqué en utilisant Vue.set ou this. $ Set. Voilà comment je y parvenir:
Une fonction constructeur de revenir objet désirable

addObj(name, count) { 
    return { 
     name: name, 
     count: count 
    } 
} 

appeler cette fonction

var newObj = new this.addObj('tom', 6); 
this.$set(this.status_arr, 'Pending', newObj); 

Et si vous souhaitez supprimer une paire de clés de val:

this.$delete(this.status_arr, 'Pending');