javascript - 如何使用方法更新 Vue.js 中的数组？

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 5 年前。

我无法使用 Vue.js 中的方法更新我的数组!

<script>
import Vue from 'vue';
export default {
  data () {
    return {
      from:'',
      to:'',
      places:[]
    }
  },
  methods:{
    searchFrom:function(){
      var autoComplete = new google.maps.places.AutocompleteService();
      autoComplete.getPlacePredictions({input:this.from},function(data){
        this.places=data;
      });
    }
  },
  computed:{

  }
}
</script>

<style>

</style>

这会在控制台上引发错误:“未捕获的类型错误:无法读取未定义的属性“位置””

Answer 1

这是因为您没有使用粗箭头，请将代码更改为:

 methods:{
    searchFrom (){
      var autoComplete = new google.maps.places.AutocompleteService();
      autoComplete.getPlacePredictions({input:this.from}, data => {
        this.places=data;
      });
    }
  },

更多详细信息:当您调用autoComplete.getPlacePredictions时它使用回调，并且在该回调中 this上下文已更改，不再是 Vue 上下文，因此它不知道什么 this.places是。粗箭头 (=>) 负责处理它并确保上下文保持不变。