Konvertieren Sie das Vue-Array in ein Proxy-Objekt

Question

Ich bin neu bei Vue. Bei der Herstellung dieser Komponente bin ich hier auf Schwierigkeiten gestoßen.

Ich verwende den folgenden Code, um eine AJAX-Anfrage an eine API zu stellen, die ein Array zurückgibt:

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

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

Was mache ich hier falsch?

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()方法。