Tukar tatasusunan Vue kepada objek proksi

Question

Saya baru menggunakan Vue. Semasa membuat komponen ini, saya menghadapi kesukaran di sini.

Saya menggunakan kod berikut untuk membuat permintaan AJAX kepada API yang mengembalikan tatasusunan:

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

Masalahnya, this.tickets被设置为一个Proxy对象，而不是我从API获取的Array.

Apa salah saya di sini?

Answer 1

Jika anda mahukan maklumat responsif, gunakan toRaw https://vuejs.org/api/reactivity-advanced.html#toraw

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

Atau jika anda tidak mahu pembalut rujukan di sekeliling maklumat anda, gunakan unref

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

Answer 2

Item dalam data seperti tiket anda ditukar kepada yang boleh diperhatikan. Ini adalah untuk responsif (pemarahan semula automatik UI dan ciri lain). Ini dijangka, objek yang dikembalikan harus berfungsi seperti tatasusunan.

Lihat dokumentasi kereaktifan kerana anda perlu berinteraksi dengan tatasusunan dalam corak tertentu atau ia tidak akan dikemas kini pada UI: https://v3.vuejs.org/guide/reactivity-fundamentals.html

Jika anda tidak mahu responsif - mungkin anda tidak pernah mengemas kini tiket pada pihak pelanggan dan hanya mahu memaparkannya - anda boleh menggunakan kaedah Object.freeze() pada response.data.