Как построить форму, используя данные динамически в vuejs

Question

я учусь vue.js. Я пытаюсь построить форму динамически из данных. Форма основана на условии. Если я выбираю какое-либо поле из поля выбора, то должно отображаться конкретное содержимое, относящееся к этой опции.

Вот данные

Если модель объекта «id: 2» - «Германия», показ из «id: 3» должен стать истинным, а показ из «id: 4» и «id: 5» - ложным.

Аналогично, если модель объекта «id: 2» - «мы», показ с id: 4 должен стать истинным, а показ с «id: 3» и «id: 5» - ложным. .

  data(){
    return{
      fields: [
        {
          id: 1,
          type: "text",
          placeholder: "Name",
          model: "",
          show: true
        },
        {
          id: 2,
          type: "select",
          placeholder: "Select",
          model: "",
          show: true,
          options: [
            {value: "germany", text: "Gemany", id: "germany"},
            {value: "us", text: "United States", id: "us"},
            {value: "uk", text: "United Kingdom", id: "uk"}
          ],
          events: "onChange"
        },
        {
          id: 3,
          type: "paragraph",
          text: "Berlin",
          show: false
        },
        {
          id: 4,
          type: "paragraph",
          text: "New York",
          show: false
        },
        {
          id: 5,
          type: "paragraph",
          text: "London",
          show: false
        }
      ]
    }
  }

Вот шаблон

<template>
  <div>
    <div class="" v-for="field in fields" :key="field.id">
      <input :type="field.type" :placeholder="field.placeholder" v-model="field.model" :id="field.id" v-if="field.type == 'text' && field.show">
      <select v-model="field.model" :id="field.id" v-if="field.type == 'select' && field.show" @change="onChange(field.id)">
        <option v-for="option in field.options" :key="option.id" :value="option.value" :id="option.id">{{option.text}}</option>
      </select>
      <p v-if="field.type == 'paragraph' && field.show" :id="field.id">{{field.text}}</p>
    </div>
    <button @click="submit">Submit</button>
  </div>
</template>

Методы

onChange(e){
      console.log(e)
    }

Как мне этого добиться? Спасибо.

Answer 1

v-model при выборе выполняет поиск выбранного значения.

Во-первых, вы можете добавить новое свойство (например, option_id), чтобы создать ссылку между полем вашего параметра id и полем абзаца option_id.
Затем добавьте данные selectedOptionId, используемые для v-model, чтобы добраться до выбранного поля.

Теперь вы можете вывести это выбранное поле из цикла v-for и удалить свойства show и model:

new Vue({
  el: "#app",
  data(){
    return{
      selectedOptionId: '',
      fields: [
        {
          id: 1,
          type: "text",
          placeholder: "Name",
          model: "",
        },
        {
          id: 2,
          type: "select",
          placeholder: "Select",
          options: [
            {value: "germany", text: "Gemany", id: "germany"},
            {value: "us", text: "United States", id: "us"},
            {value: "uk", text: "United Kingdom", id: "uk"}
          ]
        },
        {
          id: 3,
          option_id: "germany",
          type: "paragraph",
          text: "Berlin",
        },
        {
          id: 4,
          option_id: "us",
          type: "paragraph",
          text: "New York",
        },
        {
          id: 5,
          option_id: "uk",
          type: "paragraph",
          text: "London",
        }
      ]
    }
  },
  computed: {
    selectedField(){
      return this.fields.find(field =>  field.option_id == this.selectedOptionId)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
    <div v-for="field in fields" :key="field.id">
      <input :type="field.type" :placeholder="field.placeholder" v-model="field.model" :id="field.id" v-if="field.type == 'text'">
      <select v-model="selectedOptionId" :id="field.id" v-if="field.type == 'select'">
        <option v-for="option in field.options" :key="option.id" :value="option.id" :id="option.id">{{option.text}}</option>
      </select>
    </div>
    <p v-if="selectedField" :id="selectedField.id">{{selectedField.text}}</p>
</div>

Answer 2

Это может быть решением: в свои данные вы можете добавить переменную idToShowMain, которая представляет собой массив идентификаторов, которые вы хотите показать. Вы инициализируете его с визуализацией по умолчанию:

idToShowMain: [ 1,2 ],

Затем в ваших опциях вы добавите свойство для каждого элемента с массивом, связанным с этим параметром. Когда значение изменится, вы замените основной массив выбранным.

options: [
    {value: "germany", text: "Gemany", id: "germany", idToShow: [ 1,2,3 ] },
    {value: "us", text: "United States", id: "us", idToShow: [ 1,2,4 ] },
    {value: "uk", text: "United Kingdom", id: "uk", idToShow: [ 1,2 ] }
],

В конце вы измените свой шаблон следующим образом:

<div class="" v-for="field in fields" :key="field.id" v-if="idToShowMain.includes(field.id)">

Таким образом, вы можете удалить свойство show из каждого поля.

Надеюсь, это поможет вам.