Question

我的要求是这样的。

我使用v-for从对象渲染问题文件。
用户选择问题的答案后，问题编号（索引）必须是v-model 并带有该答案。我怎样才能做到这一点？这是我的代码。

＆＃13;

<template lang="html">
  <div class="container">
    <div class="" v-for="(question,index) in questions">
      <h1>Question {{index}}</h1>
      <p>{{question.question}}</p>
      <input type="radio" name="index" value="1">{{question.answer1}}<br>
      <input type="radio" name="index" value="2">{{question.answer2}}<br>
      <input type="radio" name="index" value="3">{{question.answer3}}

    </div>
    <hr>
    <button type="button" name="button" class="btn">Save and Submit</button>

  </div>
</template>

<script>
export default {
  data(){
    return{
      questions:[
        {question:"what is the capital of france?",answer1:"paris",answer2:"normandy",answer3:"rome"},
        {question:"what is the capital of france?",answer1:"paris",answer2:"normandy",answer3:"rome"},
        {question:"what is the capital of france?",answer1:"paris",answer2:"normandy",answer3:"rome"}]
    }
  }
}
</script>

＆＃13;

我希望我的问题很明确。感谢

Answer 1

在这种情况下，我认为v-model可能不是正确的解决方案。我建议你这样做。

<template lang="html">
  <div class="container">
    <div class="" v-for="(question,index) in questions">
      <h1>Question {{index}}</h1>
      <p>{{question.question}}</p>
      <input type="radio" :name="index" :value="question.answer1" @click="answerSelect(index, question.answer1)">{{question.answer1}}<br>
      <input type="radio" :name="index" :value="question.answer2" @click="answerSelect(index, question.answer2)">{{question.answer2}}<br>
      <input type="radio" :name="index" :value="question.answer3" @click="answerSelect(index, question.answer3)">{{question.answer3}}

    </div>
    <hr>
    <button type="button" name="button" class="btn">Save and Submit</button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        {
          question: "what is the capital of france?",
          answer1: "paris",
          answer2: "normandy",
          answer3: "rome"
        },
        {
          question: "what is the capital of france?",
          answer1: "paris",
          answer2: "normandy",
          answer3: "rome"
        },
        {
          question: "what is the capital of france?",
          answer1: "paris",
          answer2: "normandy",
          answer3: "rome"
        }
      ]
    };
  },
  methods: {
    answerSelect(questionIndex, answer) {
      const questions = [
        ...this.questions.slice(0, questionIndex),
        { ...this.questions[questionIndex], solution: answer },
        ...this.questions.slice(questionIndex + 1, this.questions.length)
      ];

      this.questions = questions;
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

以下是代码沙箱的链接。 https://codesandbox.io/s/o5r2xqypo9

Answer 2

在无线电台中使用v-model。

一种简单的方法是在每个selectedAnswer中创建一个question属性并将v-model绑定到它，例如：

<input type="radio" value="1" v-model="question.selectedAnswer">{{question.answer1}}<br>

另请注意，我删除了name。您使用相同的name属性所有复选框，HTML只允许每个组选定一个广播（每name个）

要获得一系列选定答案，您只需创建一个计算属性，将所选答案映射到数组中。在下面的示例中，this.answers计算属性可用于答案。

以下完整演示。

new Vue({
  el: '#app',
  data() {
    return {
      questions: [{
          question: "what is the capital of france?",
          answer1: "paris",
          answer2: "normandy",
          answer3: "rome",
          selectedAnswer: null
        },
        {
          question: "what is the capital of france?",
          answer1: "paris",
          answer2: "normandy",
          answer3: "rome",
          selectedAnswer: null
        },
        {
          question: "what is the capital of france?",
          answer1: "paris",
          answer2: "normandy",
          answer3: "rome",
          selectedAnswer: null
        }
      ]
    }
  },
  computed: {
    answers() {
      return this.questions.map(q => q.selectedAnswer);
    }
  }
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Answers: {{ answers }}
  <div class="container">
    <div class="" v-for="(question,index) in questions">
      <h1>Question {{index}}</h1>
      <p>{{question.question}} | selected: {{question.selectedAnswer || 'none'}}</p>
      <input type="radio" value="1" v-model="question.selectedAnswer">{{question.answer1}}<br>
      <input type="radio" value="2" v-model="question.selectedAnswer">{{question.answer2}}<br>
      <input type="radio" value="3" v-model="question.selectedAnswer">{{question.answer3}}
    </div>
    
    <hr>
    <button type="button" name="button" class="btn">Save and Submit</button>
  </div>
</div>

Answer 3

 <template lang="html">
      <div class="container">
        <div class="" v-for="(question,index) in questions">
          <h1>Question {{index}}</h1>
          <p>{{question.question}}</p>
          <input type="radio" :name="index" :value="question.answer1" @click="pushAnswers(index, 1)">{{question.answer1}}<br>
          <input type="radio" :name="index" :value="question.answer2" @click="pushAnswers(index, 2)">{{question.answer2}}<br>
          <input type="radio" :name="index" :value="question.answer3" @click="pushAnswers(index, 3)">{{question.answer3}}

        </div>
        <hr>
        <button type="button" name="button" class="btn">Save and Submit</button>

      </div>
    </template>

方式

pushAnswers(questionIndex,answer){ this.answerSet[questionIndex] = answer; console.log(this.answerSet); }

带v-for的VueJS v-model

3 个答案: