Vue - 무선 입력이 여러 개입니까? 값이 확인되었습니까?

Vue - 무선 입력이 여러 개입니까? 값이 확인되었습니까?

간단한 폴 생성기를 만들면서 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
  }
}

update Answer:

  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: 클릭된 무선 입력을 "체크"로 하려면 어떻게 해야 합니까?

서버에 POST 하기 위한 데이터를 취득하면, 문제는 심미적인 것입니다(사용자는 자신이 선택한 것을 볼 수 없습니다).

검색한 결과 각 입력에 대해 v-model을 설정해야 한다고 결론을 내렸습니다만, 이 경우 어떻게 해야 합니까?

무선 입력

사용할 수 있습니다.:checked표시를 하다:radio확인하신 대로입니다.

가장 간단한 방법은 단순히 v-in-in-in-in-in-in-checked속성을 각 응답에 할당하고 무선에 바인드합니다.

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

기본적으로는 두 가지 모두에 대해input양쪽 질문 타입의 s(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

위의 방법은 해당 질문의 모든 답변을 "체크 해제"한 다음 클릭된 질문을 선택한 것으로 표시합니다.

풀 데모:

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>

언급URL : https://stackoverflow.com/questions/49582035/vue-multiple-radio-inputs-checked-value