vuejs2 - v-else 在 Vue JS 中首先呈现，而不是 v-if

Question

我有一个如下所示的 HTML 元素

<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>

showOriginalContent 的初始值为 false 并且从挂载的方法调用另一个方法，我将根据某些条件将 showOriginalContent 的值设置为 true。目前，即使 showOriginalContent 为真，我也可以看到 v-else 在 v-if 在 DOM 中呈现之前显示了几分之一秒。我该如何解决这个问题？我试图将函数调用移至所有其他生命周期方法，但没有任何效果。我已经在vue js中经历了导航方法之前和之后，是否可以在这里应用该逻辑？

Answer 1

如果我正确理解您提出的问题，我认为这很正常。

因为当视图已经OK并且只显示一次时调用mounted状态。

因此，在此方法中声明其更改的变量不一定会对应显示的内容产生影响。

尝试lifecycle在 Vuejs 中查看更多详细信息。

把它放在computed or watch方法里看看。

Answer 2

使用外部div并使用另一个变量控制此 div，true当您在已安装的钩子中完成条件部件时将使用该变量.. 像这样..

<div v-if="conditioncheckdone">
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
</div>

它将解决您v-else在检查挂载条件时显示内容的问题