VueJS Dynami c добавление компонентов формы - PullRequest
Новая
       8

VueJS Dynami c добавление компонентов формы

0 голосов
/ 27 февраля 2020

Я пытаюсь создать динамическую c форму, поэтому, если я хочу добавить другой текст или какое-либо другое поле, я могу сделать это через Интернет и сохранить его в каком-нибудь файле 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 должен быть добавлен в форму. Но я не знаю, как сделать это динамично c. Это 3 поля должны быть обязательными и отображаться во всех формах (электронная почта, имя пользователя и пароль). Кто-нибудь может помочь с некоторыми советами по этому поводу?

Ответы [ 3 ]

0 голосов
/ 27 февраля 2020

Это огромный шаблон, который вы получили ^^ "

Подумайте, что вы можете добиться успеха, добавив счетчики в данные вашего компонента. Каждый раз, когда пользователь хочет добавить флажок, вы увеличиваете один из своих счетчиков в зависимости от его значения. Если пользователь хочет добавить поле для имени, например, увеличьте counterOfNameFields. В своем шаблоне вы можете l oop над этими счетчиками, чтобы отобразить правильное количество полей.

Кроме того, сделайте функцию, которая например, вы получите sh содержимое этих полей в массивах. У вас должно быть такое же количество массивов, что и у счетчиков.

Надеюсь, что это ответит на вашу проблему, скажите, если это не так:)

0 голосов
/ 27 февраля 2020

У вас может быть список для добавленных полей 

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>

Когда вы добавляете элемент на страницу, вы просто добавляете sh его в 

addedItems

коллекции и при удалении со страницы удаляются из коллекции.

0 голосов
/ 27 февраля 2020

Я думаю, что это может быть полезно https://vuejs.org/v2/guide/components.html#Dynamic -Компоненты

Вы можете использовать v-bind: is = "'yourComponentName'" И вы можете хранить список динамических элементов c компоненты и их параметры в некотором массиве.

Примерно так (конечно, это только пример) 

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