選択タグからオプションを選択したときにコンポーネント変数が更新されない

Question

最初の選択タグから選択したオプションに基づいて2番目の選択タグを設定したいとします。最初のselectタグから選択すると、APIから正しい応答が得られますが、コンポーネントで宣言した変数は更新されません。他のすべての変数はそれに応じて更新されます。 vue-resourceを使用すると、変数は、前に選択したオプションに基づいて最初の選択でを選択して、i を選択した場合にのみ更新されます。 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インスタンスを参照しません。

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

をこの問題を解決するには、あなたはどちらか、新しい thisを作成しません arrow functionを使用することができます