Question

我想要检查所有输入类型的单选按钮，但不是所有其他输入类型。我使用v-bind传递输入类型，并且我将检查的值传递给一个类似的值，这个值有效，但它也以不希望的方式与其他输入类型交互，例如，对于我的输入数字，它显示您选择向右输入的值，尽管已将其选中的值设置为false。这是我的小提琴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绑定到输入。因此，如果您不想显示currentQuestion.answer，请删除此行。

{{currentQuestion.answer}}

Vue.js设置单选按钮仅在Binded输入类型为单选按钮时选中

1 个答案: