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

Posted 2023-02-22

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

【英文标题】：Trying to get vue.js to render something conditionally based on a method in created()

【发布时间】：2019-12-28 00:22:19

【问题描述】：

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

【问题讨论】：

能否请您提供一些代码或工作小提琴？

在这个问题***.com/questions/45813347/… 中有一条与创建的步骤相关的评论不等待异步 api 调用完成

将await 放入生命周期钩子不会阻止 Vue 继续进行。更多解释：***.com/questions/56917250/…

【参考方案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 实例的引用，以便您可以正确设置数据。箭头函数可以很好地解决这个问题。