VueJS 动态添加表单组件

Question

我正在尝试制作动态表单，所以如果我想添加其他文本或其他字段，我可以通过网络完成并将其保存到某个 json 文件中。

到目前为止，这是我的代码：

<template>
  <div class="q-pa-md" style="max-width: 800px">
    <div class="col-2">
      <q-btn color="primary" label="Add Field" @click="addField = true"/>
    </div>

    <q-dialog v-model="addField">
      <q-card>
        <q-card-section>
          <div class="text-h6">Add Field</div>
        </q-card-section>

        <q-separator />

        <q-card-section style="max-height: 50vh" class="scroll">
          test
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" v-close-popup />
          <q-btn flat label="Add" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <q-separator spaced inset />
    <q-list>
      <q-item>
        <q-item-section>
          <s-input v-model="data.email" label="Email" required />
          <q-item-label caption lines="2">Email field.</q-item-label>
        </q-item-section>

        <q-item-section side top>
          <div>
            <q-toggle
              v-model="data.active"
              checked-icon="check"
              color="blue"
              unchecked-icon="clear"
            />
            <q-icon name="keyboard_arrow_up" color="blue" size="md"/>
            <q-icon name="keyboard_arrow_down" color="blue" size="md"/>
          </div>
        </q-item-section>
      </q-item>

      <q-separator spaced inset />

      <q-item>
        <q-item-section>
          <s-input v-model="data.username" label="Username" required />
          <q-item-label caption lines="2">Username field.</q-item-label>
        </q-item-section>

        <q-item-section side top>
          <div>
            <q-toggle
              v-model="data.active"
              checked-icon="check"
              color="blue"
              unchecked-icon="clear"
            />
            <q-icon name="keyboard_arrow_up" color="blue" size="md"/>
            <q-icon name="keyboard_arrow_down" color="blue" size="md"/>
          </div>
        </q-item-section>
      </q-item>

      <q-separator spaced inset />

      <q-item>
        <q-item-section>
          <s-input v-model="data.password" label="Password" type="password" required />
          <q-item-label caption lines="2">Password field.</q-item-label>
        </q-item-section>

        <q-item-section side top>
          <div>
            <q-toggle
              v-model="data.active"
              checked-icon="check"
              color="blue"
              unchecked-icon="clear"
            />
            <q-icon name="keyboard_arrow_up" color="blue" size="md"/>
            <q-icon name="keyboard_arrow_down" color="blue" size="md"/>
          </div>
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

<script>

export default {
  data () {
    return {
      newItem: true,
      titleAction: null,
      title: null,
      titleHideEvent: false,
      addField: false,
      data: {
        active: true
      }
    }
  }

}
</script>

这些都是我拥有的领域。现在，如果用户想要添加另一个复选框，他应该使用“添加字段”按钮打开对话框并选择该类型的组件，然后在他确认应该在表单中添加新的 chekcbox 之后。但我不知道如何使它动态。这 3 个字段应该是强制性的，并以所有形式（电子邮件、用户名和密码）显示。 任何人都可以提供一些建议吗？

Answer 1

我认为这可能会有所帮助https://vuejs.org/v2/guide/components.html#Dynamic-Components

你可以使用 v-bind:is="'yourComponentName'" 您可以将动态组件列表及其选项存储在某个数组中。

类似这样的东西（当然只是例子）

<component v-for="component in components" v-bind:is="component.name" v-bind:someoptions="component.options">
</component>

Answer 2

你得到了一个巨大的模板^^"

认为您可以通过在组件数据中添加计数器来取得成功。 每次用户想要添加一个复选框时，您都会根据他的选择增加一个计数器。例如，如果用户想为名称添加一个字段，请增加 counterOfNameFields。在您的模板中，您可以遍历这些计数器以显示正确数量的字段。

另外，例如，创建一个将这些字段的内容推送到数组中的函数。您应该拥有与计数器相同数量的数组。

希望这能回答你的问题，如果不是这样，请告诉我:)

Answer 3

你可以有一个添加字段的列表

data: function {
    return {
        ...
        addedItems:[],
        ...
    }
}

在你的模板中

<q-item v-for="item in addedItems>
    some html, which depends on how you define your items in your code
</q-item>

当您将项目添加到页面时，您只需将其推入

addedItems

收藏，当您将其从页面中删除时，您将其从收藏中删除。