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

Posted 2023-02-23

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

【英文标题】：How to assign array fetched from an API to data property in Vue.js?

【发布时间】：2020-05-26 16:00:25

【问题描述】：

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

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

关于如何克服这个问题有什么建议吗？

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
      );
    
  
;

【参考方案1】：

正如第一个贡献者正确注意到的那样 - 问题是您最新函数中的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);

【参考方案2】：

inthis.articles：这里this指的是函数而不是vue实例，所以你可以在函数之外定义这个：

let This=this

在你的函数内部：

This.articles = json_data.articles 这里指的是vue实例

【参考方案3】：

使用 function 关键字创建新范围。如果您使用 () => 之类的箭头语法，则可以使用父范围并通过 this.articles 设置文章

fetchnews()
  fetch()
  .then((response) => 
    return response.json();
  )
  .then((json_data) => 
    this.articles = json_data.articles
  );

【参考方案4】：

javascript function 作为全局作用域，确保使用将函数分配给变量