vue组件中动态显示序列号答案

【问题标题】：Dynamically show serial numbers in vue componentvue组件中动态显示序列号
【发布时间】：2019-07-25 22:23:10
【问题描述】：

让我解释一下我到底在寻找什么。我有一个项目，它有测验式面试，这次面试有问题。我有 3 种用户类型，每种类型都有自己的问题。例如，一个用户可以有多个角色。如果用户选择 2 个角色，那么我需要向他们展示两种类型的问题。

所以我在这里使用 vue js。

我已经制作了一个名为 Interview.vue 的基本组件，在这个组件中，我还有 3 个专门针对这些类型用户的子组件。

假设我有 3 类用户 - 1) 厨师 2) 服务员 3) 酒保因此，如果用户选择角色厨师和酒保，那么我将渲染这两个对特定角色有疑问的组件。

让我们说...我的Chef.vue 有 2 个问题。 Barman.vue 有 3 个问题。

所以我渲染了这 2 个组件，我会在网页上看到 5 个问题。

我的问题是如何给每个问题一个序列号。 ?

【问题讨论】：

【解决方案1】：

您可以创建一个全局可用的计数器，并随着每次使用而递增。

这是一个示例实现：

Vue.prototype.$elNum = 0;
Vue.prototype.$getElNum = () => Vue.prototype.$elNum += 1;

然后，每当您在应用程序的任何位置创建元素时，您都可以通过将其设置为 this.$getElNum() 来设置 key 或 serialNumber

【讨论】：