Vuejs 用于创建带有是/否嵌套问题的动态调查表

Question

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

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

我想使用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 建模？

两个

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

Answer 1

对于您的问题 #1：

从数据开始是不够的，因为问题似乎没有您将根据单选按钮提出的可选问题。

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

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

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