自定义vuejs表单组件-Java 学习之路

我已经在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;

      }

    }

  }

}

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>

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

回复于 2024-04-20T09:57:08+08:00

自定义vuejs表单组件

1 回答

相关问题