Javascript 如何使用API'在Vue中定义数据变量；s

我正在做一个使用Vue路由器从API（TMDb）播放电影的小项目。因此，我有一个名为“MovieList”的组件，在这里我连接到API。
这是我的数据：

data() {
  return {
    movies: []
  }
}

以下是我的方法：

methods: {
  getMovies: () => new Promise((resolve, reject)=> {
    const url = `https://api.themoviedb.org/3/discover/movie?api_key=MyAPI`;
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText).results);
      } else {
        reject(Error(xhr.statusText));
      }
    }
    xhr.send();
  })
}

我的朋友：

mounted() {
  this.getMovies().then(
    result => get(result)
  )
  function get(result) {
    result.forEach((el) =>  {
      this.movies = el
    })
  }
}

所以，我想要的是，得到的数组等于“data”中声明的变量“movies”。
以下是一个屏幕截图：

这是我在控制台中得到的错误：

MovieList.vue?ea6b:34 Uncaught (in promise) TypeError: Cannot set property 'movies' of undefined
    at eval (MovieList.vue?ea6b:36)
    at Array.forEach (<anonymous>)
    at get (MovieList.vue?ea6b:35)
    at eval (MovieList.vue?ea6b:30)

MovieList.vue？ea6b:34未捕获（承诺中）类型错误：无法设置未定义的属性“movies”
评估时（电影列表vue？ea6b:36）
在Array.forEach（）处
at get（MovieList.vue？ea6b:35）
评估时（电影列表vue？ea6b:30）

---

谢谢大家，希望你们能帮助我

挂载的

钩子中的代码有点奇怪

如果要将
结果
分配给
电影
数组，您真正需要的就是

导出默认值{
数据：（）=>（{movies:[]}），
//使用前面执行的“创建的”钩子
//没有明显的理由再等下去了
异步创建（）{
//直接将结果数组分配给“电影”
this.movies=等待这个。getMovies（）
},
方法：{
//您不需要更改“getMovies”
//但自从XMLHttpRequest以来，我们已经走了很长的路
异步getMovies（）{
const res=等待取数（'https://api.themoviedb.org/3/discover/movie?api_key=MyAPI')
如果（！res.ok）{
掷骰子
}
return（wait res.json（））.results
}
}
}

您的问题是，在您的
get
函数中，
this
没有引用Vue实例

您似乎还试图用数组中的每个结果覆盖
电影
，最终只存储最后一个。
您的
挂载的
钩子中的代码有点奇怪

如果要将
结果
分配给
电影
数组，您真正需要的就是

导出默认值{
数据：（）=>（{movies:[]}），
//使用前面执行的“创建的”钩子
//没有明显的理由再等下去了
异步创建（）{
//直接将结果数组分配给“电影”
this.movies=等待这个。getMovies（）
},
方法：{
//您不需要更改“getMovies”
//但自从XMLHttpRequest以来，我们已经走了很长的路
异步getMovies（）{
const res=等待取数（'https://api.themoviedb.org/3/discover/movie?api_key=MyAPI')
如果（！res.ok）{
掷骰子
}
return（wait res.json（））.results
}
}
}

您的问题是，在您的
get
函数中，
this
没有引用Vue实例

您似乎还试图用数组中的每个结果覆盖
电影
，最终只存储最后一个结果。
我不知道API返回什么数据类型，但您可以试试这个

mounted() {
    let _this = this
    _this.getMovies().then(result => {
        _this.movies = result
    })
}

我不知道API返回什么数据类型，但您可以试试这个

mounted() {
    let _this = this
    _this.getMovies().then(result => {
        _this.movies = result
    })
}

使用箭头功能时无需使用
\u此
对！我已经习惯了使用箭头功能时无需使用
\u此
对！我已经习惯了