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

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

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 callback

中使用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);
    });
  }

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

1 个答案: