How to update Array In Vue.js using method?

Question

I Can't Update my array using methods in 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>

This throws an error on console: "Uncaught TypeError: Cannot read property 'places' of undefined"

I'm using the regular expression @craig_h – Melvin George Nov 29 '17 at 10:33 — Melvin George, Nov 29 '17 at 10:33

score 2 · Answer 1 · answered Nov 29 '17 at 11:09

2

This is because you're not using fat arrows, change the code to:

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

In more details: when you call autoComplete.getPlacePredictions it uses a callback, and in that callback the this context is changed and is no longer Vue context, so it does not know what this.places is. Fat arrow (=>) takes care of it and makes sure that the context remains the same.

answered Nov 29 '17 at 11:09

Tomer

17,787
15
78
137

fatman gives recomendation to use fat arrow. :-D You got my vote! – DannyThunder Nov 29 '17 at 12:53
@DannyThunder - LOL – Tomer Nov 29 '17 at 13:10
That solved my problem . – Melvin George Nov 29 '17 at 14:59
Great :) feel free to mark it as the answer – Tomer Nov 29 '17 at 15:52

score 0 · Answer 2 · answered Nov 29 '17 at 11:22

0

I've never had good luck using fat arrows in Vue. The this is not what you expect. Try explicitly assigning this at the start of your searchFrom() method, like this...

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

answered Nov 29 '17 at 11:22

bbsimonbb

27,056
15
80
110

You do't need to do that if you're using an arrow function as they do not create their own execution context. That's OK if you're using normal functions and you can also use `bind`. – craig_h Nov 29 '17 at 11:29

How to update Array In Vue.js using method?

2 Answers2