Vue 구성 요소에서 데이터 항목을 보지 마십시오.

Question

특정 데이터 항목이 업데이트 될 때 구성 요소가 업데이트를 수행하지 못하도록하는 가장 좋은 방법은 무엇입니까? 제가 orderBy 및 page의 값을 변경하는 버튼을 가지고, 컴퍼넌트

data: function() { 
    return { 
     'orderBy': 'date_published:desc', 
     'page': 1, 
     'posts': [] 
    } 
}, 

updated() { 
    this.loadPosts(); 
}, 

methods: { 
    loadPosts: function() { 
     // code to AJAX in data 
     this.posts = response.data; 
    } 
} 

:

는 I는 다음의 특성을 갖는 뷰 컴포넌트를 갖는다. 이 값이 변경되면 updated() 메서드를 호출해야합니다. 그러나 무한 루프가 발생하므로 posts이 변경 될 때 호출하지 않기를 바랍니다.

loadPosts()이 호출되거나 this.posts이 변경되면 구성 요소에 업데이트를 중지하도록 알리는 가장 좋은 방법은 무엇입니까?

Answer 1

당신이 계산 된 재산으로보고 싶은 모든 속성을 결합하고 계산 된 속성을 볼

data: function() { 
    return { 
     'orderBy': 'date_published:desc', 
     'page': 1, 
     'posts': [] 
    } 
}, 

computed: { 
    controls(){ 
     return { 
      orderBy: this.orderBy, 
      page: this.page 
     } 
    } 
}, 
watch:{ 
    controls(){ 
     this.loadPosts() 
    } 
}, 
methods: { 
    loadPosts: function() { 
     // code to AJAX in data 
     this.posts = response.data; 
    } 
}