从select标签中选择选项时，组件变量不会更新

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