Question

我想显示数组中保存的vue元素的数量。在formControls中，我已将信息保存为应包含的元素。

它应该创建一个文本字段和两个复选框。

<template>
    <div>
        <template v-for="item in formControls">
            <component :is="item.component" :key="item.label"></component>
        </template>
    </div>
</template>

<script>
export default {
  data() {
    return {
      formControls: [
        {
          id: 1, game: 'rust', component: 'v-text-field', label: 'Server Name', required: false,
        },
        {
          id: 2, game: 'rust', component: 'v-checkbox', label: 'Offizieller Server', required: false,
        },
        {
          id: 3, game: 'rust', component: 'v-checkbox', label: 'PVE', required: false,
        },
      ],
    };
  },
};
</script>

Answer 1

Vue不知道'v-text-field'是什么，但是您可以导入特定的Vuetify组件并在代码中使用它们。

因此，通过导入

import { VTextField, VCheckbox } from 'vuetify/lib'

然后将它们注册为您的组件

components: {
    VTextField,
    VCheckbox,
  },

之后，您应该可以像这样使用formControls中的组件

  formControls: [
    {
      id: 1, game: 'rust', component: VTextField, label: 'Server Name', required: false,
    },
    {
      id: 2, game: 'rust', component: VCheckbox, label: 'Offizieller Server', required: false,
    },
    {
      id: 3, game: 'rust', component: VCheckbox, label: 'PVE', required: false,
    },
  ],

动态创建Vue组件

1 个答案: