Javascript Js具有不同类型的多个输入

我正在与Vue进行调查。我使用一个数组来处理所有问题，并使用一个索引来浏览这些问题并一次显示一个问题。我对每个问题使用不同的输入类型，例如数字、收音机、文本等。对于一些问题，我需要不止一个输入。我使用v-bind来传递问题的类型

现在我遇到的问题是，每个问题需要不止一个输入，例如，当通过单选按钮时，我只在需要2+时得到一个输入。按钮的标签也是如此。我还意识到，对于一些问题，我需要两种不同的输入类型（例如输入号码和收音机）

，让你了解我的目标。我想知道这在我目前的方法中是否可行，或者我是否需要使用组件来回答问题，并为每个问题使用不同的模板，以及我将如何去做

自从我第一次出错以来，这是我记忆中的第二次写这篇文章，所以如果我没有提到一些重要的事情，我很抱歉。提前谢谢

new Vue({
  el: '#quizz',
  data: {
    questions:[
        {question: 'What is your gender?', answer: '', type: 'radio', checked: 'true', label: 'Male'},
        {question:'How old are you?', answer: '', type: 'number', checked: 'false'},
      {question:'How many times do you workout per week?', answer: '', type: 'number', checked: 'false'},
    ],
    index:0
  },
  computed:{
    currentQuestion(){
        return this.questions[this.index]
    }
  },
  methods:{
    next(){
        if(this.index + 1 == this.questions.length)
        this.index = 0;
      else
        this.index++;

    },
    previous(){

        if(this.index - 1 < 0)
        this.index = this.questions.length - 1;
      else
        this.index--;
    }

  }
})

newvue({
el:'测验'，
数据：{
问题:[
{问题：'你的性别是什么？'，回答：''，键入：'无线电'，勾选：'真'，标签：'男'}，
{问题：'你多大了？'，回答：''，键入：'数字'，勾选：'假'}，
{问题：'你每周锻炼多少次？'，回答：''，键入：'number'，勾选：'false'}，
],
索引：0
},
计算：{
当前问题（）{
返回此.questions[此.index]
}
},
方法：{
下一个（）{
if（this.index+1==this.questions.length）
该指数=0；
其他的
这个.index++；
},
前（）{
如果（该指数-1<0）
this.index=this.questions.length-1；
其他的
本索引--；
}
}
})

我可能会通过构建问题“类型”组件来处理这个问题。比如说,

const RadioQuestion = {
    props:["value", "question"],
    template:`
        <div>
            <template v-for="label in question.labels">
                <input type="radio" :id="label" :value="label" v-model="picked">
                <label :for="label">{{label}}</label>
                <br>        
            </template>
        </div>
    `,
    data(){
        return {
            picked: this.value
        }
    },
    watch:{
        picked(){
            this.$emit("input", this.picked)
        }
    }
}

const NumericInputQuestion = {
    props:["value", "question"],
    template:`
        <div>
            <input type="number" v-model="internalValue" @input="onInput" :value="value" />
        </div>
    `,
    data(){
        return {
            internalValue: this.value
        }
    },
    methods:{
        onInput(){this.$emit("input", this.internalValue)}
    }

}

相应地修改模板

<div id="quizz" class="question">
    <h2>
        {{ currentQuestion.question }}
    </h2>
    <component :key="currentQuestion" :is="currentQuestion.type" :question="currentQuestion" v-model="currentQuestion.answer"></component>
    Current Question Answer: {{ currentQuestion.answer }}
    <div class='button' id='next'><a href='#' @click="next">Next</a></div>
    <div class='button' id='prev'><a href='#' @click="previous">Prev</a></div>
</div>

{{currentQuestion.question}
当前问题答案：{{currentQuestion.Answer}

---

这是一个最新的技术演示。

显然，如果是这样的话，你需要提供一个集合-一系列可能的答案。我不明白为什么我必须提供一系列可能的答案？我只需要接收由用户输入提供的答案，无论其类型如何。如果尝试了无效答案，我将通过验证截取它们。“what is you gender”的哪个答案无效？单选按钮不会有无效答案，cos checked设置为true，因此用户可以在不更改当前选定单选按钮的情况下继续下一步。目前只有一个，男性，但理想情况下应该有两个。我试图为标签创建一个数组，但仍然只有一个单选按钮作为输入，所以它们都同时显示。这正是我试图做的，但无法使其工作。我现在从你的例子中看出我错了。现在，我有疑问，如果我需要一个问题的输入数字和单选按钮，我将如何传递值。e、 g.插入距离：（此处输入数字）单选按钮：英里、码、公里。对于组件，我将为单选按钮添加模板，加上输入数字字段，但我不确定如何获得这两个插入值。我的小提琴。@Pitagora你可以发射一个复杂的物体。在本例中，一个同时具有单位和值的对象@Pitagora您还可以使用先前定义的组件编写组合问题。

<div id="quizz" class="question">
    <h2>
        {{ currentQuestion.question }}
    </h2>
    <component :key="currentQuestion" :is="currentQuestion.type" :question="currentQuestion" v-model="currentQuestion.answer"></component>
    Current Question Answer: {{ currentQuestion.answer }}
    <div class='button' id='next'><a href='#' @click="next">Next</a></div>
    <div class='button' id='prev'><a href='#' @click="previous">Prev</a></div>
</div>