Question

我正在尝试使用taxParentId函数中通过API调用检索的新ID更新getTaxParentId，但无法更改它。我可以在方法中用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

由于异步，请在数据中添加观察者，然后在其中登录。

"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",

理想情况下，您会从每个电话中获得承诺，然后等待所有这些。如果一个调用依赖于另一个调用，则需要将第二个调用放在then（）块中，或者甚至更好地，等待它（异步/等待）

使用此方法，您要做的就是返回承诺，它将被同步化。

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

那么整洁，然后链接async created (){ let $this = this; await this.getPostType(location.href); await this.getTaxParent(location.href) await this.getTaxParentId(); await this.getPosts(); },块。您可以将整个块包装在单个捕获中，并捕获所有异常和所有拒绝。当然，如果调用不相关，则可能需要并行调用而不等待。

Answer 2

由于您已经在使用Promise，因此您应该能够建立一个Promise链来解决您的异步问题。

执行当前功能： javascript getTaxParentId：function（）{ 让$ 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（）{ 让$ 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();
    })
  },

这应强制this.getPosts()等待getTaxParentId完成。

Vue.js 2无法更改方法内部的data属性值

2 个答案: