我已经在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;
}
}
}
}
答案 0 :(得分:0)
这是我工作代码的一部分。我创建了可能包含(或不包含)多个表单字段的组件。所有这些都来自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>
基本上,想法是将每个字段创建为组件并在那里传递属性。而且你可以制作比现在更多的自定义表格。