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

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

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

SearchBar.vue

{{film}}
从“axios”导入axios；
导出默认值{
名称：“搜索栏”，
数据（）{
返回{
电影：“，
电影：[]
};
},
创建（）{
axios
.get（“https://swapi.co/api/films/")
.然后（功能（响应）{
//成功
//控制台日志（响应）；
this.films=response.data.results；
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
});
}
};

谁能告诉我为什么我会出错？注意：我通过Vue Cli在本地运行此程序以进行即时原型制作

一种方法是使用箭头功能：

created（）{
axios
.get（“https://swapi.co/api/films/")
。然后（（响应）=>{
//成功
//控制台日志（响应）；
this.films=response.data.results；
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
});
}

一种方法是使用箭头功能：

created（）{
axios
.get（“https://swapi.co/api/films/")
。然后（（响应）=>{
//成功
//控制台日志（响应）；
this.films=response.data.results；
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
});
}

错误已预先清除，您的

电影

属性为

未定义

。尝试添加一些详细信息，尝试console.log您的axios响应。我认为

response.data.results

是

undefined

的，当你的

films

在你的循环中使用时，它失败了。看起来如果不使用胖箭头，我就不能使用“this”？错误很明显，你的

films

属性是

undefined

。尝试添加一些详细信息，尝试console.log您的axios响应。我认为

response.data.results

是

未定义的

那么当你的

电影

在你的循环中使用时，它失败了。看起来如果不使用胖箭头，我就不能使用“this”？

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