Как определить переменную данных в Vue с помощью API

Question

Я делаю небольшой проект по показу фильмов из API (TMDb) с использованием Vue Routers. Итак, у меня есть компонент 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
    })
  }
}

Итак, я хочу что полученный массив равен переменной movies, объявленной в data.
Вот скриншот: введите описание изображения здесь

И это ошибка, которую я получаю в консоли:

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)

Спасибо всем, надеюсь, вы можете мне помочь!

Answer 1

Я не знаю, какой тип данных возвращает API ，, но вы можете попробовать это

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

Answer 2

Код в вашем хуке mounted немного странный.

Если вы хотите назначить result своему массиву movies, все, что вам действительно нужно, это

export default {
  data: () => ({ movies: [] }),

  // use the "created" hook as it executes earlier
  // and there's no obvious reason to wait longer
  async created () {
    // directly assign the result array to "movies"
    this.movies = await this.getMovies()
  },


  methods: {
    // you don't need to change "getMovies" 
    // but we've come a long way since XMLHttpRequest
    async getMovies () {
      const res = await fetch('https://api.themoviedb.org/3/discover/movie?api_key=MyAPI')
      if (!res.ok) {
        throw res
      }
      return (await res.json()).results
    }
  }
}

Ваша проблема заключалась в том, что внутри вашей get функции this не относится к экземпляру Vue.

Вы также, похоже, пытались перезаписать movies каждым результатом в массиве, который закончится тем, что вы сохраните только последний.