Vue: Observer 개체로 자동 채워지는 빈 어레이

Vue: Observer 개체로 자동 채워지는 빈 어레이

데이터의 빈 배열을 초기화한 다음 서버에서 JSON을 가져와 채우려고 한다.

문제는 어레이에 항상 추가 Observer 객체가 있기 때문에 로그에 기록하면 다음과 같은 내용이 표시된다는 점이다.

빈 항목 배열: [ob: 관찰자]

다음은 발췌한 코드:

data() {
        return {
            items: []
        }
    },
 created() {
         this.$http.get('/api/menus').then(function (response) {

            console.log('items before', this.items); //THIS LOGS items before: [__ob__: Observer]
             this.items = [].concat(response.body);
            this.items.forEach(function (item) {
              console.log('item', item);

              item.$add('active', false);

              item.tests.forEach(function (test) {
                  test.$add('active', false);
              });
        });

         }).catch(function (err) {
             console.error('err', err);

         });

     },

문제는 어레이의 개체에 새 속성을 추가하려고 하면 다음과 같은 오류가 발생한다는 점이다.

오류 TypeError: 항목.$add는 함수가 아님

디버깅할 때 나는 그것이 관찰자 개체를 배열의 일부로 간주하기 때문에 그런 일이 일어난다.

정상인가?단지 $add가 존재하는지 확인해야 하는가?뷰에서 렌더링할 때 Vue가 이 개체를 무시하는가?

코드에 따라 설정하려는 경우active당신의 소유물.items에 반대하다false. 또한 모든 속성을 설정하려는 경우active어느 항목에서나tests의 소유물.false.

Vue.js는 반응적이며 자동으로 변화를 감지하지만, 그 속성이 아니라 개체 자체에 대해서만 변화를 감지한다.어레이의 경우 vue는 이러한 방법에 의한 변경만 감지한다(vue.js https://vuejs.org/v2/guide/list.html#ad)의 목록 렌더링에 대한 자세한 정보:

• 푸시슈트
• 펑펑 울다
• 교대조
• 교대하지 않는
• 이음매의
• 분류를 하다
• 역행의

하지만 재산은 어떨까?넌 할 수 있다.force다음이 포함된 어레이 또는 개체의 깊은 곳에서 변경 내용을 보려면 vueVue.set(object, property, value)또는this.$set어느 모로 보아서Vue인스턴스

예를 들어 다음과 같이 구현하십시오.

this.items.forEach(function (item, key) {
    console.log('item', item);

    this.$set(this.items[key], 'active', false);

    item.tests.forEach(function (test, testKey) {
        this.$set(this.items[key].tests[testKey], 'active', false);
    }, this);
}, this);

그리고 그것은 효과가 있을 것이다.다음은 작업 예: http://jsbin.com/cegafiqeyi/edit?html,js,output(일부 ES6 기능 사용, 혼동하지 마십시오)

참조URL: https://stackoverflow.com/questions/42995272/vue-empty-array-automatically-populated-with-observer-object