我想用条件字段动态创建表单。表单的定义在对象Q中。 下面的示例是一个Vue组件,使用bootstrap-vue。
<template>
<div>
<div v-for="q of Q">
<br/>
<template v-if="q.type == 'input'">
{{ q.question }}
<em v-if="q.comment"><br />{{ q.comment }}</em>
<b-form-input v-model="q.value" :type="q.subtype" :placeholder="q.placeholder"></b-form-input>
Value: {{ q.value }}
</template>
<template v-if="q.type == 'radio'">
{{ q.question }}
<em v-if="q.comment"><br />{{ q.comment }}</em>
<b-form-group>
<b-form-radio-group buttons
stacked
v-model="q.value"
:options="q.options"/>
</b-form-group>
Value: {{ q.value }}
</template>
</div>
</div>
</template>
<script>
export default {
name: 'Questionnaire',
data() {
return {
locale: 'en',
Q: [
{
name: 'age',
value: null,
question: 'How old are you?',
placeholder: 'Your age...',
comment: 'years since you were born',
type: 'input',
subtype: 'number',
range: [18, 99],
},
{
name: 'cq',
value: null,
question: 'Conditional Question?',
type: 'radio',
options: [
{text: 'Yes', value: '0'},
{text: 'No', value: '1'},
],
if: [{object: 'age', largerthan: 30}],
},
]
};
},
methods: {
onChange: function(){
alert('test');
},
},
}
</script>
我只想在年龄&gt;时显示“条件问题”。 30。
this.Q
(因为它尚不存在)。 我不受这个对象结构的约束,但是它将使用AJAX ...
获得 问题:有没有办法观看this.Q[0].value
?或者只有在第一个问题具有一定值的情况下才能使第二个问题可用?
答案 0 :(得分:1)
因此使用@ Radovan-Šurlák作为基础,并改善它有点导致:
<template>
<div>
<div v-for="(q, name) of Q" v-if="doShow( name )">
<br/>
<template v-if="q.type == 'input'">
<b>{{ q.question }}</b>
<em v-if="q.comment"><br/>{{ q.comment }}</em>
<b-form-input v-model="q.value" :type="q.subtype" :placeholder="q.placeholder"></b-form-input>
</template>
<template v-if="q.type == 'radio'">
<b>{{ q.question }}</b>
<em v-if="q.comment"><br/>{{ q.comment }}</em>
<b-form-group>
<b-form-radio-group buttons
stacked
v-model="q.value"
:options="q.options"/>
</b-form-group>
</template>
</div>
</div>
</template>
<script>
export default {
name: 'Questionnaire',
data() {
return {
locale: 'en',
Q: {
age: {
value: null,
question: 'How old are you?',
placeholder: 'Your age...',
comment: 'years since you were born',
type: 'input',
subtype: 'number',
range: [18, 99],
},
cq: {
value: null,
question: 'Conditional Question?',
type: 'radio',
options: [
{text: 'Yes', value: '0'},
{text: 'No', value: '1'},
],
if: [{object: 'age', largerthan: 30, smallerthan: 35, equals: 31, notequal: 32}],
},
},
};
},
methods: {
doShow: function( field ) {
for( var obj in this.Q[ field ].if )
{
var ifObj = this.Q[ field ].if[ obj ];
if( ifObj.equals !== undefined && this.Q[ ifObj.object ].value != ifObj.equals )
return false;
if( ifObj.notequal !== undefined && this.Q[ ifObj.object ].value == ifObj.notequal )
return false;
if( ifObj.largerthan !== undefined && this.Q[ ifObj.object ].value <= ifObj.largerthan )
return false;
if( ifObj.smallerthan !== undefined && this.Q[ ifObj.object ].value >= ifObj.smallerthan )
return false;
}
return true;
},
submit: function () {
console.log('Submit form, send back data via Axios')
},
},
mounted() {
// Axios call
}
}
</script>
答案 1 :(得分:1)
我通过使用&#34; v-if&#34;来管理创建效果。模板中第二个div的指令。
然后我初始化了&#34; Q&#34;数组由空数组和模拟AJAX请求由setTimeout在&#34; created()&#34;生命周期钩。
<template>
<div>
<div v-if="!(q.if) || Q[0].value > q.if[0].largerthan" v-for="q of Q">
<br/>
<template v-if="q.type == 'input'">
{{ q.question }}
<em v-if="q.comment"><br />{{ q.comment }}</em>
<b-form-input v-model="q.value" :type="q.subtype" :placeholder="q.placeholder"></b-form-input>
Value: {{ q.value }}
</template>
<template v-if="q.type == 'radio'">
{{ q.question }}
<em v-if="q.comment"><br />{{ q.comment }}</em>
<b-form-group>
<b-form-radio-group buttons
stacked
v-model="q.value"
:options="q.options"/>
</b-form-group>
Value: {{ q.value }}
</template>
</div>
</div>
</template>
<script>
export default {
name: 'Questionnaire',
data() {
return {
locale: 'en',
Q: [],
};
},
created() {
setTimeout( _ => this.Q = [
{
name: 'age',
value: null,
question: 'How old are you?',
placeholder: 'Your age...',
comment: 'years since you were born',
type: 'input',
subtype: 'number',
range: [18, 99],
},
{
name: 'cq',
value: null,
question: 'Conditional Question?',
type: 'radio',
options: [
{text: 'Yes', value: '0'},
{text: 'No', value: '1'},
],
if: [{object: 'age', largerthan: 30}],
},
{
name: 'age',
value: null,
question: 'How old are you?',
placeholder: 'Your age...',
comment: 'years since you were born',
type: 'input',
subtype: 'number',
range: [18, 99],
},
], 500)
},
}