this 또는 vm을 사용하여 Vue 액세스 속성 $ data

Question

Vue가 생소하고 뷰 모델 데이터에 액세스하는 방법이 확실하지 않습니다. 언제 this.property을 사용해야하고 언제 vm.$data.property을 사용해야합니까?

아래 예제에서는 행을 선택할 수있는 테이블이 있고 모든 행을 선택하고 모든 행을 선택 취소하는 메서드가 있습니다. 선택을 취소하면 this.selectedRows에 의해 selectedRows에 액세스 할 수 있습니다. 그러나 select에서 this.selectedRows가 정의되지 않았기 때문에 rowTableVm.$data.selectedRow을 사용해야합니다.

언제 사용해야합니까? 언제 vm. $ 데이터를 사용해야합니까?

<tbody> 
    <tr v-for="row in get_rows()"> 
    <td> 
     <input type="checkbox" v-bind:value="row.id" v-model="selectedRows"> 
    </td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
</tbody> 

var rowTableVm = new Vue({ 
     el: '#rowTable', 
     data: { 
      rowList: [{..},{..}], 
      selectedRows: [] 
     }, 
     methods: { 
      get_rows: function get_rows() { 
       return this.rowList; 
      }, 
      deselect_rows: function() { 
       this.selectedRows= []; 
      }, 
      select_rowse: function() { 
       this.deselect_rows(); 
       this.get_rows().forEach(function (entry) { 
        rowTableVm.$data.selectedRows.push(entry.id); 
       }); 
      } 
     } 
    }); 

Answer 1

문제가 발생한 이유는 범위 지정 때문입니다. 특히 forEach 안에있는 this은 더 이상 Vue 인스턴스에 바인딩되지 않습니다. 이 문제를 해결하기 위해, 다음과 같이 루프를 입력하기 전에 변수에 대한 참조를 저장하려고 :

일반적으로

select_rowse: function() { 
    this.deselect_rows(); 
    var this_vue_instance = this; 
    this.get_rows().forEach(function (entry) { 
     this_vue_instance.selectedRows.push(entry.id); 
    }); 
} 

, 당신은 가능한 vm.$data를 사용하여 피하려고한다. 특히 코드 전체에 분산 된 변수에 대한 참조가 여러 개 있고 변수의 이름을 변경해야하는 경우 this이 일관성있게 유지되는 경우 문제가 발생합니다. 변수 참조가 절대적으로 필요한 경우에만 사용하십시오. 이는 드문 경우 여야합니다.