Tukar tatasusunan Vue kepada objek proksi
P粉476046165
P粉476046165 2023-09-16 19:32:12
0
2
576

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?

P粉476046165
P粉476046165

membalas semua(2)
P粉071626364

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

P粉203792468

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan