javascript - Vue - 多个 radio 输入，检查值？

Question

我在学习 vue 的同时创建了一个简单的轮询生成器，但我遇到了 radio 输入的问题。

问题可以有两种类型之一 - 选择或范围(两者都是单选输入，“选择”是单选输入单选题，“范围”是具有 1-5 个值的单选输入问题，如上所示下图；稍后我必须修复命名...)。

问题是，当我呈现民意调查时，我有与问题一样多的单选输入组，并且选择一个值不会检查单选输入。

我通过 axios.get 获得包含问题和可能答案的投票。

模板片段:

  <label>Ankieta</label>
  <div class="card mb-2" v-for="question in poll.Questions">
    <div class="card-header p-2">{{question.question}}</div>
    <div class="card-body pb-1">
      <div class="form-group" v-if="question.type === 'radio'" >
        <div v-for="answer in question.QuestionAnswers">
          <input type="radio" :name="'question'+question.id" v-bind:value="answer.answer" v-on:click.prevent="updateAnswer(question, answer)">
          <label v-bind:for="answer.id">{{answer.answer}}</label>
        </div>
      </div>
      <div v-else-if="question.type === 'range'">
        <p class="text-muted mb-4 d-flex justify-content-center">W jakim stopniu zgadzasz się ze stwierdzeniem w pytaniu?<br/>1 - Bardzo się nie zgadzam, 3 - Neutralny/a, 5 - Bardzo się zgadzam<br></p>
        <div class="form-group d-flex justify-content-center" >
          <label class="radio-inline d-flex justify-content-center w-100" v-for="answer in question.QuestionAnswers">
            <input type="radio" :name="'question'+question.id" v-bind:value="answer.answer" v-on:click.prevent="updateAnswer(question, answer)"><span class="text-muted font-weight-bold m-1">{{answer.answer}}</span>
          </label>
        </div>
      </div>
    </div>
  </div>

数据:

data() {
  return {
    submission: {
      email: undefined,
      age: undefined,
      answers: []
    },
    poll: {},
    loading: false
  }
}

更新答案:

  updateAnswer(question, answer) {
    let index = this.submission.answers.findIndex(q => q.questionId === question.id);
    let ans = {
      questionId: question.id,
      answerId: answer.id
    };
    if(index === -1) {
      this.submission.answers.push(ans);
    } else {
      this.submission.answers.splice(index, 1);
      this.submission.answers.push(ans);
    }
    console.log(this.submission);
  }

TL;DR:如何让点击的 radio 输入“选中”？

我获取数据以 POST 到服务器，问题很简单(用户看不到他选择的内容)。

根据我的搜索，我得出结论，我需要为每个输入设置 v-model，但在这种情况下该怎么做？

Radio inputs

Answer 1

您可以使用 :checked 将 :radio 标记为已选中。

最简单的方法就是为每个答案添加一个checked属性并将其绑定(bind)到radio:

<input type="radio" ... v-bind:checked="answer.checked">

基本上对两种问题类型(radio 和 range)的 input 都这样做。

并调整你的方法使其在点击时被选中:

updateAnswer(question, answer) {
  question.QuestionAnswers.forEach(a => Vue.set(a, 'checked', false));
  answer.checked = true; // no need to call Vue.set because it is now reactive

上述方法“取消选中”该问题的所有答案，然后将单击的问题标记为已选中。

完整演示:

new Vue({
  el: '#app',
  data() {
    return {
      submission: {
        email: undefined,
        age: undefined,
        answers: []
      },
      poll: {Questions: [
        {question: "radio question", id: 1, type: 'radio', QuestionAnswers: [
          {id: 1, answer: 'a'}, {id: 2, answer: 'b'}
        ]},
        {question: "range question", id: 2, type: 'range', QuestionAnswers: [
          {id: 1, answer: 'a'}, {id: 2, answer: 'b'}
        ]}
      ]},
      loading: false
    }
  },
  methods: {
    updateAnswer(question, answer) {
      question.QuestionAnswers.forEach(a => Vue.set(a, 'checked', false));
      answer.checked = true; // no need to call Vue.set because it is now reactive
      let index = this.submission.answers.findIndex(q => q.questionId === question.id);
      let ans = {
        questionId: question.id,
        answerId: answer.id
      };
      if (index === -1) {
        this.submission.answers.push(ans);
      } else {
        this.submission.answers.splice(index, 1);
        this.submission.answers.push(ans);
      }
      console.log(this.submission);
    }
  }
})

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

<div id="app">
  <label>Ankieta</label>
  <div class="card mb-2" v-for="question in poll.Questions">
    <div class="card-header p-2">{{question.question}}</div>
    <div class="card-body pb-1">
      <div class="form-group" v-if="question.type === 'radio'">
        <div v-for="answer in question.QuestionAnswers">
          <input type="radio" :name="'question'+question.id" v-bind:value="answer.answer" v-on:click.prevent="updateAnswer(question, answer)" v-bind:checked="answer.checked">
          <label v-bind:for="answer.id">{{answer.answer}}</label>
        </div>
      </div>
      <div v-else-if="question.type === 'range'">
        <p class="text-muted mb-4 d-flex justify-content-center">W jakim stopniu zgadzasz się ze stwierdzeniem w pytaniu?<br/>1 - Bardzo się nie zgadzam, 3 - Neutralny/a, 5 - Bardzo się zgadzam<br></p>
        <div class="form-group d-flex justify-content-center">
          <label class="radio-inline d-flex justify-content-center w-100" v-for="answer in question.QuestionAnswers">
            <input type="radio" :name="'question'+question.id" v-bind:value="answer.answer" v-on:click.prevent="updateAnswer(question, answer)" v-bind:checked="answer.checked"><span class="text-muted font-weight-bold m-1">{{answer.answer}}</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>