开发者问题收集

如何将从 API 获取的数组分配给 Vue.js 中的数据属性？

2020-02-11
4687
javascript arrays api vue.js vue-component

我尝试从外部源获取新闻文章，它返回 JSON 对象。我想将其 articles 属性分配给组件中的变量。不知何故发生了此错误。

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

关于如何克服此问题的任何建议？ 

export default {
  name: "blog",
  data() {
    return {
      articles: [],
    };
  },
  mounted() {
    // API call
    this.fetchnews();
  },
  methods: {
    fetchnews(){
      fetch(
      "----------------------news link-------------------------"
    )
      .then(function(response) {
        return response.json();
      })
      .then(function(json_data) {
        //console.log(typeof(json_data))
        this.articles = json_data.articles
      });
    }
  }
};
3个回答

正如第一位贡献者正确注意到的那样 - 问题是最新函数中的 this.articles 并没有真正指向您需要的内容。 如果您仅限于 ES5，那么请坚持第一个答案。 但是，如果您可以使用 ES6，那么只需利用简短语法的优势： 

export default {
  name: "blog",
  data() {
    return {
      articles: [],
    };
  },
  mounted() {
    // API call
    this.fetchnews();
  },
  methods: {
    fetchnews(){
      fetch("----------------------news link-------------------------")
      .then(response => response.json())
      .then(json_data => this.articles = json_data.articles);
    }
  }
};
  • 在这种情况下， this 将正确指向外部范围。

此外，为什么您需要两个 then() ？您可以将它们合并为一个： 

.then(response => this.articles = response.json().articles);
Stalinko
2020-02-11

使用 function 关键字创建新的作用域。如果您使用箭头语法（如 () => {}），则可以使用父作用域并通过 this.articles 设置文章 

fetchnews(){
  fetch()
  .then((response) => {
    return response.json();
  })
  .then((json_data) => {
    this.articles = json_data.articles
  });
}
oshell
2020-02-11

在 this.articles 中：此处 this 指的是函数而非 vue 实例，因此您可以在函数外部定义 this，如下所示：

let This=this

并在函数内部定义：

This.articles = json_data.articles 此处的 This 指的是 vue 实例

mai elrefaey
2020-02-11