선택 태그에서 옵션을 선택할 때 구성 요소 변수가 업데이트되지 않습니다.

Question

첫 번째 선택 태그에서 선택한 옵션을 기반으로 두 번째 선택 태그를 채우고 싶습니다. 첫 번째 select 태그에서 선택하면 API에서 올바른 응답을 얻지 만 구성 요소에서 선언 한 변수는 업데이트되지 않습니다. 다른 변수는 그에 따라 업데이트됩니다. vue-resource을 사용할 때 변수는 이전 선택 옵션을 기반으로 첫 번째 선택에서 대체 선택을 입력 한 경우에만 업데이트됩니다. axios를 사용하여 성공하지 못했습니다.

<label class="col-sm-2 control-label">Bind</label> 
<div class="col-sm-10"> 
    <select class="form-control m-b" name="DataSource" v-on:change="FetchFields" V-model="BindTo"> 
     <option value="0" selected="selected">Select a data source</option> 
     <option v-for="Template in Templates" :value="Template.Id" :key="Template.Id">{{ Template.TName }}</option> 
    </select> 
</div> 
<label class="col-sm-2 control-label">Data Source</label> 
<div class="col-sm-10"> 
    <select class="form-control m-b" name="Field" v-model="FieldToBind"> 
     <option value="0" selected="selected">Select a Field</option> 
     <option v-for="Field in TemplateCustomFields" :value="Field.Id" :key="Field.Id">{{ Field.CName }}</option> 
    </select> 
</div> 

VueJS 부

data:() => { 
    return { 
     TemplateCustomFields: [], 
     CustomFieldTypeSelected: '', 
     ShowAdditionalFieldChoice: false, 
     Templates: [], 
     BindTo: '', 
     FieldToBind:'', 
    }; 
}, 
methods:{ 
FetchFields() { 
    console.log(this.BindTo); 
    if (this.BindTo != "0") { 
     axios({ 
      method: 'get', 
      url: 'http://localhost:57802/api/gettemplatebyid', 
      params: { 
       Id: this.BindTo 
      } 
     }).then(function (response) { 
      this.TemplateCustomFields = response.data 
     }) 
    } 
} 
} 

Answer 1

당신은 범위 지정 문제가 약속의 then 방법 : 아래의 샘플 코드의 트리밍 버전입니다. JavaScript의 콜백은 자체 실행 컨텍스트를 만들므로 this은 Vue 인스턴스를 참조하지 않습니다. 당신이 중 하나를 생성하지 않는 arrow function를 사용할 수있는이 문제를 해결하려면 this 새로운 :

FetchFields() { 
    if (this.BindTo != "0") { 
    axios({ 
     method: 'get', 
     url: 'http://localhost:57802/api/gettemplatebyid', 
     params: { 
     Id: this.BindTo 
     } 
    }).then(response => { 
     this.TemplateCustomFields = response.data 
    }) 
    } 

또는 당신이 뭔가에 this을 할당 할 수 있습니다

FetchFields() { 
    var self = this; 
    if (this.BindTo != "0") { 
    axios({ 
     method: 'get', 
     url: 'http://localhost:57802/api/gettemplatebyid', 
     params: { 
     Id: this.BindTo 
     } 
    }).then(function(response) { 
     self.TemplateCustomFields = response.data 
    }) 
    } 

또는 당신이 사용할 수있는 bind :

FetchFields() { 
    if (this.BindTo != "0") { 
    axios({ 
     method: 'get', 
     url: 'http://localhost:57802/api/gettemplatebyid', 
     params: { 
     Id: this.BindTo 
     } 
    }).then(function(response) { 
     this.TemplateCustomFields = response.data 
    }.bind(this)) 
    }