Vue 动态组件排序？

Question

在此先感谢您的帮助。

我在应用程序中使用了 Vue 的动态组件标签。

https://vuejs.org/v2/guide/components.html#Dynamic-Components

组件列表是通过计算的 属性 提供的，我只是迭代创建 <component /> 元素。

<component v-for="component in myComponents" :key="component" is="component />

我 运行 遇到的问题是组件是异步加载的，某些组件有时可能比其他组件加载时间更长。由于这个原因，有时组件会以所需的顺序加载。

我很好奇是否有人对我如何能够强制组件按所需顺序显示提出建议？

Answer 1

您可以尝试使用有序计算 属性，例如，如果您想按名称对组件进行排序。

在模板中：

<component v-for="component in orderedComponents" :key="component" is="component />

在脚本中

computed: {
  orderedComponents: function () {
    return _.orderBy(this.myComponents, 'name')
  }
}

这个例子使用的是 Lodash，当然你可以按照你想要的方式订购它。

您可以查看文档：https://vuejs.org/v2/guide/migration.html#Replacing-the-orderBy-Filter

Answer 2

是的，您可以通过将 :key 设置为一个数字来执行命令。

首先，修改您的 for 循环以使用索引：

v-for="(index, value) in myComponents"

然后设置key为索引

:key="index"

这应该保持顺序完整 - 如果没有，您始终可以先创建占位符，然后在运行时替换它们。