Question

我正在尝试将data()实例中的Vue值设置为从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();
        }
}

我收到的错误提示

未捕获（承诺）TypeError：无法设置未定义的属性“ posts”

关于this.posts = ...

Answer 1

this在使用window范围时获取dynamic引用，使用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中的值

1 个答案: