试图让 vue.js 根据 created() 中的方法有条件地渲染某些东西

【问题标题】：Trying to get vue.js to render something conditionally based on a method in created()试图让 vue.js 根据 created() 中的方法有条件地渲染某些东西
【发布时间】：2019-12-28 00:22:19
【问题描述】：

我在我的created 方法中有一个调用，它有一个await。我想知道该调用的结果是否已加载，以便我可以有条件地显示/隐藏 DOM 中的内容。现在看起来 DOM 在该方法完成之前就被渲染了。但是我虽然在 DOM 渲染之前调用了 created 中的方法？

【问题讨论】：

能否请您提供一些代码或工作小提琴？
在这个问题stackoverflow.com/questions/45813347/… 中有一条与创建的步骤相关的评论不等待异步 api 调用完成
将await 放入生命周期钩子不会阻止 Vue 继续进行。更多解释：stackoverflow.com/questions/56917250/…

标签： vue.js

【解决方案1】：

假设创建的钩子在组件安装之前运行是正确的。但是，生命周期挂钩不会等待异步调用完成。如果您想等待该调用完成并加载数据，您可以使用加载数据时设置为 true 的布尔值来实现。

您的模板：

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

在你的 vue 实例中

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

通过这种方式，您可以隐藏您的内容，直到该呼叫得到解决。处理 ajax 响应时请注意上下文。您需要保留 this 作为对原始 vue 实例的引用，以便您可以正确设置数据。箭头函数可以很好地解决这个问题。

【讨论】：