A Custom vuejs form component

Question

I have already composed the forum post here on Vuejs forum and the explanation is there too. I have developed my solution as far as I could but I am stuck with an issue on this. Need some help here please.

The link to the code is as follows: Custom form component

The section of code I have an issue with is on the vue instance where I have the created option which happens when the page loads. Here I am trying to only display input fields by the name attribute according to the form name. So for example, it is one whole custom form component that has multiple input fields and referenced twice on a page, but each form has specific input fields. So I am trying to split the component.

Form 1

name field
surname field
email field

Form 2

username field
password field

Code:

created: function (formNameAttribute, inputNameAttribute) {

  var getForms = document.getElementsByTagName('form');
  var inputElement = document.getElementsByTagName('input');

  for (var i = 0; i < getForms.length; i++) {

    formNameAttribute = getForms[i].name;
    console.log('Form name attribute: ', formNameAttribute);      

    for (var j = i; j < inputElement.length; j++) {

      inputNameAttribute = inputElement[i][j].name;
      console.log('Input name attribute: ', inputNameAttribute);

      switch (getForms[i][j].name) {
        case 'Account Details':
          var fieldAttributeName = inputElement[i].name;
          console.log('Input', fieldAttributeName);

          break;

      }

    }

  }

}

Answer 1

This is part of my working code. I've create component which may have (or not) several form fields. All that comes from JSON. I've created a loop and iterate there 4 components for text, options, checkbox and stars(for a rating).

<div v-for="(elem, ind) in problem.problem_config.structure">
  <con-text v-if="elem.type === 'text'"
  :element="elem"
  v-on:edit="editField"
  :value="getFilledValue(elem.id)"
  :key="elem.id"></con-text>

  <con-option v-if="elem.type === 'option'"
  :element="elem"
  v-on:edit="editField"
  :value="getFilledValue(elem.id)"
  :key="elem.id"></con-option>

  <con-checkbox v-if="elem.type === 'checkbox'"
  :element="elem"
  v-on:edit="editField"
  :value="getFilledValue(elem.id)"
  :key="elem.id"></con-checkbox>

  <con-stars v-if="elem.type === 'stars'"
  :element="elem"
  v-on:edit="editField"
  :value="getFilledValue(elem.id)"
  :key="elem.id"></con-stars>
</div>

for example text input looks like this

<template>
  <div class="field" style="margin-bottom:14px">
    <label>{{element.name}}</label>
    <input
    type="text"
    :placeholder="element.description"
    :maxlength="element.filter.max_length"
    v-model="content"
    >
    <p class="description">{{element.description}}</p>
  </div>
</template>

<script>
export default {
  name: 'con-text',
  props: ['element', 'value'],
  data: function () {
    return {
      content: this.value ? this.value : ''
    }
  },

  watch: {
    content: function (val) {
      let obj = {
        id: this.element.id,
        name: this.element.name,
        type: this.element.type,
        value: val,
        description: this.element.description
      }
      this.$emit('edit', obj)
    }
  }
}
</script>

option form:

<template>
  <div class="field" style="margin-bottom:14px">
    <label>{{element.name}}</label>
    <select class="ui fluid dropdown" v-model="content">
      <option disabled value="">{{element.description}}</option>
      <option v-for="opt of element.value" :key="opt.value" :value="opt.value">
        {{opt.label}}
      </option>
    </select>
    <p class="description">{{element.description}}</p>
  </div>
</template>

<script>
/* global $ */

export default {
  name: 'con-option',
  props: ['element', 'value'],
  data: function () {
    return {
      content: this.value ? this.value.value : null
    }
  },

  watch: {
    content: function (val) {
      let selectedEl = this.element.value.find(o => o.value === val)
      let valObj = {value: val, label: selectedEl.label}
      let obj = {
        id: this.element.id,
        name: this.element.name,
        type: this.element.type,
        value: valObj,
        description: this.element.description
      }
      this.$emit('edit', obj)
    }
  },

  mounted: function () {
    $('select.dropdown').dropdown()
  }
}
</script>

Basically idea is to create each field as component and pass properties there. And you can make more custom form than you have now.