Question

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

问题可以有两种类型中的一种 - 选择或范围（两者都是无线电输入，'选择'是无线电输入单选问题，'范围'是具有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：

  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：如何“点击”点击的无线电输入？

我将数据发送到服务器，问题只是美观（用户无法看到他选择的内容）。

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

Radio inputs

Answer 1

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

最简单的方法就是为每个答案添加checked属性并将其绑定到无线电：

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

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

并调整您的方法，以便在点击时进行检查：

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

上述方法＆＃34;取消选中＆＃34;该问题的所有答案，然后将点击的问题标记为已选中。

完整演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Vue - 多个无线电输入，检查值？

1 个答案: