自定义vuejs表单组件

Question

我已经在Vuejs论坛上撰写了论坛帖子，说明也在那里。 我已经尽力开发了解决方案，但是对此我仍然有一个问题。 请在这里需要帮助。

该代码的链接如下： 自定义表单组件

我有问题的代码部分是在vue实例上，在该实例中，我具有创建的选项，该选项在页面加载时发生。 在这里，我试图仅根据表单名称通过name属性显示输入字段。 因此，例如，这是一个完整的自定义表单组件，具有多个输入字段并在页面上被引用两次，但是每个表单都有特定的输入字段。 因此，我正在尝试拆分组件。

表格1

名称栏位
姓氏字段
电子邮件栏位

表格2

用户名字段
密码栏

码：

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

这是我的工作代码的一部分。 我创建了可能具有（或没有）多个表单域的组件。 所有这些都来自JSON。 我创建了一个循环，并在其中迭代了4个用于文本，选项，复选框和星号的组件（用于评级）。

<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>

例如文本输入看起来像这样

<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>

选项形式：

<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>

基本上，想法是将每个字段创建为组件并在其中传递属性。 而且您可以制作比现在更多的自定义表格。