试图让vue.js有条件地渲染基于创建的方法（）

Question

我在我的创建的方法中有一个调用，它有一个等待。我想知道调用的结果是否已加载，以便有条件地显示/隐藏DOM中的内容。现在看起来DOM是在该方法完成之前呈现的。但是我认为created中的方法是在DOM呈现之前调用的？

Answer 1

假设创建的钩子在组件挂载之前运行是正确的。但是，生命周期挂钩并不等待异步调用完成。如果要等待调用完成并加载数据，可以使用一个布尔值，在加载数据时将其设置为true。

您的模板：

<div v-if='dataLoaded'>Now you can see me.</div>

在你的vue instace

export default {
  data () {
    return {
      dataLoaded: false
    }
  },
  created () {
    loadMyData().then(data => {
      // do awesome things with data
      this.dataLoaded = true
    })
  }
}

通过这种方式，您可以隐藏您的内容，直到该调用得到解决。处理ajax响应时请注意上下文。您需要将此作为原始vue实例的引用，以便正确设置数据。箭头函数可以很好地实现这一点。