selecting 来自 select 标签的选项时，组件变量不会更新

Question

我想根据第一个 select 标签的 selected 选项填充第二个 select 标签。当我从第一个 select 标签中选择时，我从 API 得到了正确的响应，但是我在组件中声明的变量没有得到更新。其他所有变量都会相应更新。当我使用 vue-resource 时，只有当我 根据之前选择的第一个 select 做出替代选择 时，变量才会更新选项。使用 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

您的 promise 的 then 方法存在范围界定问题。 JavaScript 中的回调创建自己的执行上下文，因此 this 不引用 Vue 实例。要解决此问题，您可以使用不创建新 this:

的 arrow function

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

selecting 来自 select 标签的选项时，组件变量不会更新

Component variable does not update when selecting option from select tag

asp.net

vue.js

axios