Vue Array 转换为 Proxy 对象

Question

我是 Vue 的新手。在制作这个组件时我被困在这里。

我正在向使用此代码返回数组的 API 发出 AJAX 请求：

 <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 对象而不是 Array 我从 API 获取。

我在这里做错了什么？

原文由 Eduardo Robles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

数据中的项目（例如您的票）被制成可观察的对象。这是为了允许反应（自动重新呈现 UI 和其他功能）。这是预期的，返回的对象的行为应该与数组一样。

查看反应性文档，因为您需要以特定模式与数组进行交互，否则它不会在 ui 上更新： https ://v3.vuejs.org/guide/reactivity-fundamentals.html

如果你不想有反应 - 也许你永远不会在客户端更新票证而只想显示它们 - 你可以在 response.data 上使用 Object.freeze();

原文由 Joseph Connolly 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你想要反应性信息使用 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

原文由 Tarun_vella 发布，翻译遵循 CC BY-SA 4.0 许可协议