一个自定义的 vuejs 表单组件

Question

我已经在 Vuejs 论坛上撰写了论坛帖子，并且解释也在那里。我已经尽可能地开发了我的解决方案，但我遇到了一个问题。请在这里寻求帮助。

代码链接如下：Custom form component

我遇到问题的代码部分是在 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>

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