将数据对象设置为 Vue 3 中 Promise 的值

Question

我正在尝试将 Vue 实例中的 data() 值设置为从 mongodb api 调用返回的 Promise 中检索到的值。我能够检索我试图实现的数据，但是我很难在 data() 字段中使用它，以便我可以在模板中访问它。

我从 vue2 中找到的一些解决方案在这种情况下似乎不起作用。提前致谢。

Vue

<template>
  <Article :title=posts[0].title></Article>  // Another Vue component
</template>

let stories;

export default {
       data() {
            return {
                posts: {}
            }
       },
        methods: {
            loadPosts() {
                stories = getPosts(); // makes an api request to a mongodb that returns a Promise
                stories.then(function(response) {
                    this.posts = response.posts;
                    console.log(response.posts[0].title); // "My Post Title"
                });

            }
        },
        mounted() {
            this.loadPosts();
        }
}

我收到的错误是

Uncaught (in promise) TypeError: Cannot set property 'posts' of undefined

参照this.posts = ...

Answer 1

this 在使用 dynamic 范围时获取 window 引用，使用 lexical scope binding 获取 this 作为 Vue

为了您的具体参考和渴望阅读更多关于作用域的信息 - 请遵循此 Static (Lexical) Scoping vs Dynamic Scoping (Pseudocode)

对于词汇绑定使用 arrow-function

loadPosts() {
  stories = getPosts(); 
  stories.then(response => {
      this.posts = response.posts;
      console.log(response.posts[0].title); // "My Post Title"
  });
 }

将数据对象设置为 Vue 3 中 Promise 的值

Set data object to value from Promise in Vue 3

promise

vue.js

vuejs3