Question

我必须设计一个表格，我已经用嵌套的多个问题展示了问题。第一个问题将始终是带有是/否选项的单选按钮。

嵌套问题也可以是是/否或输入框或下拉列表。

我想通过bootstrap，vue js和Kendo-ui为日期选择器动态创建调查表单。

对于验证，我将在输入中传递所需的属性。

基本上我的问题设置看起来像这样。

所以，我已经实施了。

＆＃13;

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"
          }
        ]
      }
    ]
  }
})

＆＃13;

<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>

＆＃13;

基本上我对实现两种不同的逻辑感到震惊

一

实施第2号问题场景的逻辑（在上图中）。我应该如何使用输入框和日期选择器切换div，如上图所示。我应该如何创建输入 Q Array并为v-for建模？

两个

我正在努力绑定阵列上所有单选按钮的值。或在列表中。 ...

Answer 1

对于您的问题＃1：

首先，数据不足，因为问题似乎没有根据单选按钮提出的可选问题。

这是一个带有可选问题的纯HTML实现。您可以相应地将其调整为bootstrap-vue。

https://jsfiddle.net/tecoholic/hL68h2v2/

简短回答是，在显示可选问题时，在可选问题中存储一个名为condition的值和期望值，并对问题进行v-if="q.value === condition。

使用是/否嵌套问题创建动态调查表单的Vuejs

1 个答案: