[Vuejs]-Component variable does not update when selecting option from select tag

by

0👍

✅

You have a scoping issue in your promise’s then method. Callbacks in JavaScript create their own execution context, so this does not refer to the Vue instance. To solve this you can either, use an arrow function which does not create a new 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
    })
  }

Or you can assign this to something:

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

Or you can use 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))
  }

Leave a comment