获取请求后无法设置 属性 - Axios 和 HTML5 数据列表

Question

我正在尝试使用 Axios 执行 GET 请求，但在控制台中出现以下错误：

TypeError: Cannot set property 'films' of undefined
at eval (SearchBar.vue?e266:26)

SearchBar.vue

    <template>
    <section>
        <input v-model='film' type='text' list='films'>
  <datalist id='films'>
    <option v-for='film in films' :key='film.episode_id'>{{film}}</option>
  </datalist>
    </section>
    </template>

<script>
import axios from "axios";
export default {
  name: "SearchBar",
  data() {
    return {
      film: "",
      films: []
    };
  },
  created() {
    axios
      .get("https://swapi.co/api/films/")
      .then(function(response) {
        // handle success
        //console.log(response);
        this.films = response.data.results;
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  }
};
</script>

谁能告诉我为什么会出现错误？注意：我在本地运行这个是为了通过Vue-Cli

进行即时原型制作

Answer 1

1. 一种方法是使用箭头函数：

created() {
  axios
    .get("https://swapi.co/api/films/")
    .then((response) => {
      // handle success
      //console.log(response);
      this.films = response.data.results;
    })
    .catch(function(error) {
      // handle error
      console.log(error);
    });
}

2. 另一种方法 that = this & 然后在 promise 回调

中使用 that

created() {
  const that = this; // <-- assign this in that

  axios
    .get("https://swapi.co/api/films/")
    .then(function (response) {
      // handle success
      //console.log(response);
      that.films = response.data.results;
    })
    .catch(function(error) {
      // handle error
      console.log(error);
    });
  }