如何将默认 "data" 值初始化为回调函数的返回值？

Question

我运行遇到了一个问题，即当函数是异步时，能够将 App.vue 上的值初始化为该函数的结果。我也尝试将其设置为承诺的解决方案，但这似乎也没有用。在前一种情况下，我只得到一个未定义的值，而在第二种情况下，我只得到一个 js promise 的 ref 类型。 Vue 中将变量初始化为稍后完成的回调结果的正确方法是什么？

Answer 1

我更喜欢在 created lifecycle hook 中执行此操作。异步操作完成后，结果将存储在数据属性中。

new Vue({
  el: "#app",
  data: {
    asyncData: null
  },
  created() {
    const url = 'https://jsonplaceholder.typicode.com/posts/1';
    axios.get(url).then(response => {
        this.asyncData = response.data;
    });
  }
})

模板：

<div id="app">
    {{ asyncData }}
</div>

Here is a fiddle

如何将默认 "data" 值初始化为回调函数的返回值？

How do I initialize a default "data" value to the returned value of a callback function?

javascript

promise

vue.js

es6-promise

vuejs2