代码之家 › 专栏 › 技术社区 › Nate Beers

虚拟用户.js2无法更改方法内数据属性的值

vuejs2 vue.js javascript

Nate Beers · 技术社区 · 6 年前

我正在尝试更新 taxParentId 使用我在 getTaxParentId $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)
          }
        )
    },
  },

});

2 回复 | 直到 6 年前

Steven Spungin 6 年前

由于异步的原因,可以向数据中添加观察者,并在那里登录。

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();
  },

then 阻碍。您可以将整个块包装在一个catch中,并捕获所有异常和所有拒绝。当然,如果调用不是依赖的,您可能希望并行调用它们而不是等待。

Nathan Bland 6 年前

因为您已经在使用承诺,所以应该能够构建一个承诺链来解决异步问题。

```javascript语言 getTaxParentId:函数(){ 让$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:函数(){ 让$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 要完整。