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 to a number来强制执行命令。

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

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

然后将key设置为索引

:key="index"

这应该使顺序保持得体-如果不是这样，您总是可以先创建占位符，然后在运行时替换它们。