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，但您当然可以按照自己的方式订购。

您可以查看文档：{​​{3}}

Answer 2

是的，您可以通过将：key设置为数字来强制执行该命令。

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

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

然后将索引键设置为

:key="index"

这应该保持顺序不变-否则，您总是可以先创建占位符，然后在运行时替换它们。