Vue.js – Aggiungere un array come nuova proprietà 0 (0)

Vue.js

By on Wed Apr 17 in Javascript, Programming, Vue.js


Ho trascorso alcune ore lo scorso fine settimana affrontando il problema comune di modificare un oggetto in Vue.js reattivo e tracciare le sue modifiche. La sfida era quella di aggiungere un array come nuova proprietà in un oggetto Vue reattivo.

Proprietà dinamica dell’oggetto reattivo

Dopo aver ottenuto la risposta ai dati tramite una richiesta GET, ho potuto vedere la stampa della nuova proprietà nella console, ma il frontend non è cambiato, così ho pensato che qualcosa stesse accadendo dietro la tenda.

<div id="app">
  <p>{{ myObj.first }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    myObj: {}
    
  },
   mounted () {
   this.myObj.first = 'bbb';
   }
})

Il mio pensiero era che probabilmente non conoscevo Vue per quanto credevo (…senza probabilmente)!

Leggi la documentazione sulla reattività di Vue.js

Una delle prime lezioni del mio corso di informatica è stata “RT#M! Quindi è quello che ho fatto:

https://vuejs.org/v2/guide/reactivity.html

Molto interessante la sezione Change Detection Caveats:

A causa delle limitazioni del JavaScript moderno (e l’abbandono di Object.observe), Vue non può rilevare l’aggiunta o la cancellazione di proprietà.

E ancora:

Vue non permette di aggiungere dinamicamente nuove proprietà reattive a livello di root a un’istanza già creata.
Tuttavia, è possibile aggiungere proprietà reattive ad un oggetto annidato usando il metodo Vue.set(object, key, value).

Vai alla sezione Global API per controllare il comando in profondità:

https://vuejs.org/v2/api/#Vue-set

Aggiunge una proprietà a un oggetto reattivo, assicurandosi che la nuova proprietà sia anche reattiva, quindi innesca gli aggiornamenti della vista. Questo deve essere usato per aggiungere nuove proprietà agli oggetti reattivi, poiché Vue non può rilevare le normali aggiunte di proprietà (ad esempio this.myObject.newProperty = ‘hi’).

Codice finale

<div id="app">
  <p>{{ myObj.first }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    myObj: {}
    
  },
   mounted () {
	Vue.set(this.myObj, 'first', 'aaa');
   }
})

Spero che questo possa aiutarvi a capire meglio come funziona la reattività di Vue.js e come tracciare i cambiamenti di un oggetto. Potete adottare lo stesso approccio con gli array poiché il primo argomento del metodo Vue.set può essere un oggetto o un array.

Vue.js in WordPress Plugin

Dai un’occhiata al mio plugin WordPress VueSquare. È basato su un’interfaccia utente Vue.js: Consumando le API di Foursquare puoi trovare i migliori posti per mangiare, bere, fare acquisti o visitare. Cerca nella tua zona o in qualsiasi città del mondo.