將Vue數組轉換為代理對象

Question

我是Vue的新手。在製作這個組件的過程中，我在這裡遇到了困難。

我使用以下程式碼向API發出AJAX請求，該API傳回一個陣列：

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

問題是，this.tickets被設定為一個Proxy對象，而不是我從API取得的Array。

我在這裡做錯了什麼？

Answer 1

如果您想要響應式訊息，請使用 toRaw https://vuejs.org/api/reactivity-advanced.html#toraw

#

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

或如果您不想要 ref 包裝器包圍您的訊息，請使用 unref

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

Answer 2

像您的票務等資料中的項目被轉換為可觀察物件。這是為了實現響應性（自動重新渲染UI和其他功能）。這是預期的，傳回的物件應該像數組一樣工作。

查看響應性文檔，因為您需要以特定的模式與數組交互，否則它不會在UI上更新：https://v3.vuejs.org/guide/reactivity-fundamentals.html

如果您不想要響應性 - 也許您從不在客戶端更新票務，只想顯示它們 - 您可以在response.data上使用Object.freeze()方法。