javascript - Vue.js 设置单选按钮仅在绑定(bind)输入类型为单选按钮时选中

Question

我希望我拥有的所有输入类型都是单选按钮，但对于所有其他输入类型则不需要。我使用 v-bind 来传递输入类型，并且确实以类似的值传递检查的值，这可以工作，但它也会以不期望的方式与其他输入类型交互，例如对于我的输入数字，它显示您选择在右侧输入的值，尽管已将其检查值设置为 false。这是我的 fiddle https://jsfiddle.net/cgrwe0u8/6/

new Vue({
  el: '#quizz',
  data: {
    questions:[
        {question: 'What is your gender?', answer: '', type: 'radio', checked: 'true'},
        {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--;
    }

  }
})

HTML

<script src="https://unpkg.com/vue"></script>

<div id="quizz" class="question">
    <h2>
      {{ currentQuestion.question }}
    </h2>
    <input v-bind:type="currentQuestion.type" v-model="currentQuestion.answer" :checked="currentQuestion.checked">
    {{ 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>

Answer 1

如果问题是它显示答案的原因，那么这就是预期的行为，因为 currentQuestion.answer 通过 v-model 绑定(bind)到输入。因此，如果您不想显示 currentQuestion.answer，只需删除此行即可。

{{ currentQuestion.answer}}