Vue.js 2無法更改方法內部的data屬性值

Question

我正在嘗試使用在getTaxParentId函數內通過API調用檢索的新ID更新taxParentId ，但無法更改它。 我可以在方法中用console.log記錄值，但是不會更新它。 這似乎是范圍的問題，但是我已經設置$this = this來解決這個問題，但是，它不起作用。

getPostType方法可以正常工作並正確更新數據值。

var newVue = new Vue({
  el: '#app',
  data() {
    return{
      posts: [],
      taxonomy: '',
      postType: '',
      taxParentSlug: '',
      taxParentId: 0
    }
  },
  created (){
    let $this = this;
    this.getPostType(location.href);
    this.getTaxParent(location.href)
    this.getTaxParentId();
    this.getPosts();

  },
  methods: {
    getPostType: function(currentURL){
        if (currentURL.includes('residential')) {
            this.postType = 'residential';
        }else if(currentURL.includes('commercial')){
            this.postType = 'commercial';
        }else if (currentURL.includes('auto')) {
            this.postType = 'auto';
        }
    },
    getTaxParent: function(currentURL){
        if (currentURL.includes('solar')) {
            this.taxParentSlug = 'solar';
        }else if(currentURL.includes('decorative')){
            this.taxParentSlug = 'decorative';
        }else if (currentURL.includes('safety-security')) {
            this.taxParentSlug = 'safety-security';
        }
    },
    getTaxParentId: function(){
        let $this = this;

        axios
          .get(apiRoot + $this.postType + '-categories')
          .then(function (response) {
            response.data.forEach(function(item){
                if (item.slug == $this.taxParentSlug) {
                    $this.taxParentId = item.id;
                }
            });
          }
        )
    },
    getPosts: function(){
        let $this = this;

        console.log(apiRoot + $this.postType + '-categories?parent=' + $this.taxParentId)
        axios

          .get(apiRoot + $this.postType + '-categories?parent=' + $this.taxParentId)
          .then(function (response) {
            $this.posts = response.data;
            console.log($this.posts)
          }
        )
    },
  },

});

Answer 1

由於異步的原因，請在數據中添加觀察者，然后在其中進行日志記錄。

watch:{
    posts(value){console.log(value))},
    taxParentId(value){console.log(value))}
}

理想情況下，您會從每個電話中獲得承諾，然后等待所有這些。 如果一個調用依賴於另一個調用，則需要將第二個調用放在then（）塊中，或者甚至更好地，等待它（異步/等待）

使用此方法，您需要做的就是返回諾言，諾言將被同步。

  async created (){
    let $this = this;
    await this.getPostType(location.href);
    await this.getTaxParent(location.href)
    await this.getTaxParentId();
    await this.getPosts();
  },

那么多的清潔工，然后鏈條then阻塞。 您可以將整個塊包裝在單個捕獲中，並捕獲所有異常和所有拒絕。 當然，如果調用不相關，則可能要並行調用而不等待。

Answer 2

由於您已經在使用Promise，因此您應該能夠構建一個Promise鏈來解決您的異步問題。

拿你當前的函數：```javascript getTaxParentId：function（）{let $ this = this;

    axios
      .get(apiRoot + $this.postType + '-categories')
      .then(function (response) {
        response.data.forEach(function(item){
            if (item.slug == $this.taxParentSlug) {
                $this.taxParentId = item.id;
            }
        });
      }
    )
},

並使其返回值，即使它只是響應```''javascript getTaxParentId：function（）{let $ this = this;

    axios
      .get(apiRoot + $this.postType + '-categories')
      .then(function (response) {
        response.data.forEach(function(item){
            if (item.slug == $this.taxParentSlug) {
                $this.taxParentId = item.id;
            }
        });
        return response
      }
    )
},

然后，在您的created()函數中，可以鏈接該調用。

created (){
    let $this = this;
    this.getPostType(location.href);
    this.getTaxParent(location.href)
    this.getTaxParentId()
     .then(function (response) {
        this.getPosts();
    })
  },

這應該強制getTaxParentId this.getPosts()等待getTaxParentId完成。