왜 내 배열이 아닌 옵저버가 있는 거죠?

왜 내 배열이 아닌 옵저버가 있는 거죠?

My Vue Component는 다음과 같은 코드로 구성됩니다.

<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
      });
    }
  }
}
(...)

왜 이런 걸 얻었을까?[__ob__: Observer][4] 지점의 상태를 로깅할 때 사용합니다.보시다시피 어레이는data로컬 변수에서 값을 가져와 체크합니다.로컬 변수와 글로벌 변수가 모두 동일합니다(포인트 [2]).

그런 다음 사용자가 다음 요소를 클릭하면showName할당된 메서드(pt. [3]), pt와 동일한 출력이 표시됩니다.[2] 단, 그 대신[__ob__: Observer]가 콘솔에 표시됩니다.

거기서 무슨 일이 일어나고 있는 거죠?값을 가져오려면 어레이를 어떻게 호출해야 합니까?

화살표 함수식은 함수식보다 구문이 짧고 자체 this, 인수, super 또는 new.target이 없습니다.함수식을 화살표 함수로 대체해 보십시오.

<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>

언급URL : https://stackoverflow.com/questions/44531714/why-is-there-an-observer-instead-of-my-array