Convertir le tableau Vue en objet proxy

Question

Je suis nouveau sur Vue. Lors de la création de ce composant, j'ai rencontré des difficultés ici.

J'utilise le code suivant pour faire une requête AJAX à une API qui renvoie un tableau :

<script>
import axios from 'axios';
export default {
  data() {
    return {
      tickets: [],
    };
  },
  methods: {
    getTickets() {
      axios.get(url)
        .then((response) => {
            console.log(response.data) //[{}, {}, {}]
            this.tickets = [...response.data]
            console.log(this.tickets) //proxy object
          })
    },
  },
  created() {
    this.getTickets();
  }
};
</script>

Le problème est que this.tickets被设置为一个Proxy对象，而不是我从API获取的Array.

Qu'est-ce que je fais de mal ici ?

Answer 1

Si vous souhaitez des informations réactives, utilisez toRaw https://vuejs.org/api/reactivity-advanced.html#toraw

const foo = {}
    const reactiveFoo = reactive(foo)
    
    console.log(toRaw(reactiveFoo) === foo) // true

Ou si vous ne voulez pas que le ref enveloppe vos informations, utilisez unref

https://vuejs.org/api/reactivity-utilities.html#unref

Answer 2

Les éléments des données comme vos tickets sont convertis en observables. C'est pour la réactivité (rendu automatique de l'interface utilisateur et d'autres fonctionnalités). C'est normal, l'objet renvoyé devrait fonctionner comme un tableau.

Consultez la documentation sur la réactivité car vous devez interagir avec le tableau selon un modèle spécifique, sinon il ne sera pas mis à jour sur l'interface utilisateur : https://v3.vuejs.org/guide/reactivity-fundamentals.html

Si vous ne voulez pas de réactivité - peut-être que vous ne mettez jamais à jour les tickets côté client et que vous souhaitez simplement les afficher - vous pouvez utiliser la méthode Object.freeze() sur réponse.data.