vuejs2 - Vuejs 用于创建带有是/否嵌套问题的动态调查表
问题描述
我必须设计一个表格,我用嵌套的多个问题显示一个问题。第一个问题将始终是带有是/否选项的单选按钮。
嵌套问题也可以是是/否或输入框或下拉菜单。
我想用 和 为日期选择器动态创建bootstrap
调查vue js
表Kendo-ui
。
对于验证,我将在输入中传递所需的属性。
基本上我的问题设置如下所示。
所以,到目前为止我已经实现了。
new Vue({
el: '#app',
methods: {},
data: {
tabIndex: 0,
Q: [{
id: 1,
value: null,
question: "Are you at least age 16?",
type: "radio",
options: [{
text: "Yes",
value: "0"
}, {
text: "No",
value: "1"
}]
},
{
id: 2,
value: null,
question: "Are you a college Graduate?",
type: "radio",
name: "college",
children: [{
id: 3,
value: null,
question: "Please Select Your degree.",
type: "text",
name: "degree",
options: null
}],
options: [{
text: "Yes",
value: "0"
},
{
text: "No",
value: "1"
}
]
}
]
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-row class="justify-content-center">
<b-col md="8">
<b-card no-body>
<b-tabs warning pills card vertical v-model="tabIndex" nav-wrapper-class="collapse-navbar">
<b-tab title="Education Information" title-item-class="disabledTab">
<div v-for="(q, name) of Q">
<b-card>
<template v-if="q.type == 'radio'">
<b-form-group :label="`${++name}. ${q.question}`">
<b-form-radio-group v-model="q.value" :options="q.options" name="radioInline">
</b-form-radio-group>
</b-form-group>
</template>
</b-card>
</div>
</b-tab>
</b-tabs>
</b-card>
</b-col>
</b-row>
</div>
基本上我在实现两种不同的逻辑时感到震惊
一
问题 2 的场景实施逻辑(如上图所示)。我应该如何使用输入框和日期选择器切换 div,如上图所示。我应该如何创建我的输入Q Array
并建模v-for
?
二
我正在努力绑定数组上所有单选按钮的值。或在列表中。...
解决方案
对于您的问题 #1:
从数据开始是不够的,因为问题似乎没有您将根据单选按钮提出的可选问题。
这是一个带有可选问题的纯 HTML 实现。您可以相应地将其调整为 bootstrap-vue。
https://jsfiddle.net/tecoholic/hL68h2v2/
condition
简短的回答是,在应显示可选问题并在问题上执行时,将可选问题中调用的值与预期值一起存储v-if="q.value === condition
。
推荐阅读
- entity-framework - Automapper - 从列表项属性映射到 int 列表
- sql-server - SQL Server 复制模型快照、事务和合并——这是最好的
- sql - 使用 with 子句消除具有空值的重复行
- javascript - 使 .removeClass() 和 .addClass() 在上下滑动时平滑过渡
- laravel - 列出 Laravel 中的所有亮点时,TODO 突出显示不起作用
- autofac - KeyFilter 可以通过多个级别工作吗?
- python - 尽管使用了扩展文本功能,Tweepy 仍然没有返回全文
- python - 从 App Engine 运行时 Python 3.7 调用 Cloud Function
- java - 初学者字符串数组操作
- java - 将布尔数组作为字段添加到 Firestore 文档