My Vue Component consists of i.e. this code:

<script>
export default {
  data() {
    return {
      sailNames: []
    }
  },
  methods: {
    showName: function(e) { // [3] called by @click event from DOM
      console.log(this.sailNames); // [4] shows: [__ob__: Observer]
    },
    getJsonData() { // [1] called on created() hook
      $.getJSON("./src/res/sails.json", function(data) {
        const sailNames = [];
        $.each(data, function(i, names) {
          sailNames.push(names);
        });
        this.sailNames = sailNames;
        console.log(this.sailNames);
        console.log(sailNames); // [2] both logs give the same output
      });
    }
  }
}
(...)

I'm wondering, why I get this [__ob__: Observer] when logging the state at point [4]. As you see, the array is defined in the data section, then it gets values from a local variable and check is made: both local and global variables are identical (point [2]).

Then, when a user clicks on an element with showName method assigned (pt. [3]), I'd expect to see the same output as in pt. [2], but instead that [__ob__: Observer] appears in the console.

What is happening there? How should I call the array to get its values?

My Vue Component consists of i.e. this code:

<script>
export default {
  data() {
    return {
      sailNames: []
    }
  },
  methods: {
    showName: function(e) { // [3] called by @click event from DOM
      console.log(this.sailNames); // [4] shows: [__ob__: Observer]
    },
    getJsonData() { // [1] called on created() hook
      $.getJSON("./src/res/sails.json", function(data) {
        const sailNames = [];
        $.each(data, function(i, names) {
          sailNames.push(names);
        });
        this.sailNames = sailNames;
        console.log(this.sailNames);
        console.log(sailNames); // [2] both logs give the same output
      });
    }
  }
}
(...)

I'm wondering, why I get this [__ob__: Observer] when logging the state at point [4]. As you see, the array is defined in the data section, then it gets values from a local variable and check is made: both local and global variables are identical (point [2]).

Then, when a user clicks on an element with showName method assigned (pt. [3]), I'd expect to see the same output as in pt. [2], but instead that [__ob__: Observer] appears in the console.

What is happening there? How should I call the array to get its values?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Nov 3, 2020 at 12:42 AbreQueVoy asked Jun 13, 2017 at 21:16 AbreQueVoyAbreQueVoy 2,32688 gold badges3939 silver badges6161 bronze badges 3

• 8 It's how the magic of Vue works. Don't worry about it. vuejs/v2/guide/reactivity.html. Oh, and the reason your array isn't there is because you're using the wrong this. Turn the callback of getJSON into an arrow function, to obtain the correct this. – Eric Guan Commented Jun 13, 2017 at 21:23
• 5 I would argue that one should always worry about how the "magic" of any software works. Now if I can only get Vue.js to "magically" console.log data in a way that I'm not forever clicking on {__ob__: Observer} toggles to see what I'm logging ... – AJB Commented Aug 15, 2018 at 2:07
• @AJB agreed. Understanding this "magic" leads to making better design decisions instead of accepting a solution that may appear to work, but could throw unintended side effects down the road. – verboze Commented Aug 16, 2018 at 21:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. Try to replace function expression with arrow functions.

<script>
export default {
  data() {
    return {
      sailNames: []
    }
  },
  methods: {
    showName(e){  
      console.log(this.sailNames); 
    },
    getJsonData() { 
      $.getJSON("./src/res/sails.json", (data) => {
        const sailNames = [];
        $.each(data, function(i, names) {
          sailNames.push(names);
        });
        this.sailNames = sailNames;
      });
    }
  }
}
</script>