Question

我正在尝试渲染我的DOM，具体取决于我从axios get返回的一些数据。我似乎无法把握时机。 get在created钩中，但是get与实际接收数据之间存在延迟。基本上，如果seller_id中有信息，那么我需要显示cancel按钮，否则不需要。这是我的代码：

这在我的created钩子中

axios.get('https://bc-ship.c9users.io/return_credentials').then(response => {
      this.seller_id = response.data.seller_id;
      this.selected_marketplace = response.data.marketplace;      
      this.token = response.data.auth_token;
});

，这就是显示或隐藏按钮的逻辑。我试过created, mounted, beforeUpdate, and updated都没有运气。我也尝试过$nextTick，但我无法获得正确的时间。这是我目前所拥有的：

beforeUpdate: function () {
// this.$nextTick(function () {
  function sellerIdNotBlank() {
    var valid = this.seller_id == '';
    return !valid;
  }
  if(sellerIdNotBlank()){
    this.show_cancel_button = true;
  }
// })
},

Answer 1

首先，从后端获取数据并尝试与Vue.js生命周期方法同步毫无意义。它永远都行不通。

此外，您应该避免beforeUpdate生命周期事件。它通常是一种代码气味。 beforeUpdate仅在您手动执行某些DOM操作并且需要在Vue.js尝试重新呈现之前再次进行调整的情况下使用。

此外，show_cancel_button是计算属性的很好的候选者。这是组件的外观：

const componentOpts = {

    data() {
        return {
            seller_id: '',
            // ... some more fields
        };
    },

    created() {
        axios.get('https://bc-ship.c9users.io/return_credentials').then(response => {
            this.seller_id = response.data.seller_id;
            this.selected_marketplace = response.data.marketplace;      
            this.token = response.data.auth_token;
        });
    },

    computed: {

        show_cancel_button() {
            return this.seller_id !== '';
        }

    }
}

axios之后但在DOM渲染之前使用哪个Lifecycle挂钩

1 个答案: