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完成。