如何使用方法更新 Vue.js 中的数组？ [复制]

Question

我无法使用 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>

这会在控制台上引发错误：“Uncaught TypeError: Cannot read property 'places' of undefined”

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 是什么。粗箭头 (=>) 负责处理并确保上下文保持不变。

Answer 2

我从来没有在 Vue 中使用过粗箭头。这不是你所期望的。尝试在 searchFrom() 方法的开头显式分配this，如下所示...

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