Vue.Js 不同类型的多个输入

Question

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

现在我遇到的问题是每个问题需要不止一个输入，例如通过单选按钮时，我只在需要 2+ 时才得到一个。按钮的标签也一样。我还意识到我将需要两种不同的输入类型来解决某些问题（例如输入数字和收音机）。

This is my working fiddle，让您了解我要完成的工作。我想知道这是否适用于我目前的方法，或者我是否需要为问题使用组件并为每个问题使用不同的模板，以及我将如何去做。

自从第一次出现错误以来，这是我凭记忆第二次写这篇文章，所以如果我没有提到重要的事情，我深表歉意。提前致谢！

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

  }
})

Answer 1

我可能会通过构建问题 "type" 组件来处理这个问题。例如，

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

}

然后像这样构建你的数据。

data: {
  questions:[
    {question: 'What is your gender?', type: RadioQuestion, labels:["Male", "Female"], answer: null},
    {question:'How old are you?', type: NumericInputQuestion, answer: null},
    {question:'How many times do you workout per week?', type: NumericInputQuestion, answer: null}
  ],
  index:0
}

相应地修改您的模板。

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

这是更新后的 fiddle 技术演示。

Vue.Js 不同类型的多个输入

Vue.Js Multiple inputs with different types

html

javascript

vue.js

vue-component