Обвязка ввода в v-for

Question

Я хочу связать значения из переключателя ввода, сгенерированного v-for.

Я пытался использовать v-модель, чтобы связать их с переменными question_1, question_2, question_3 в data ().

    <template>
      <div id="radioButtons">
        <div v-for="(question_obj, index) in questions" :key="index" class="form-group form-radio">
          <span>{{ question_obj.question }} {{ question_obj.variable }}</span>
          <br>
          <label>
            <input type="radio" :name="question_obj.variable" v-model="question_obj.variable" value="yes" >
            <span>Yes</span>
          </label>
          <label>
            <input type="radio" :name="question_obj.variable" v-model="question_obj.variable" value="no" >
            <span>No</span>
          </label>
        </div>
      </div>
    </template>

    <script>

    export default {
      name: 'radioButtons',
      data () {
        return {
        question_1: '',
        question_2: '',
        question_3: '',
        questions: [
          { question: 'Question 1', variable: 'question_1'},
          { question: 'Question 2', variable: 'question_2'},
          { question: 'Question 3', variable: 'question_3'},
        ]
      }
    }
    }

    </script>

    <style>
    </style>

Я бы хотел, чтобы значение сохранялось в данных () после выбора переключателя.

Answer 1

Попробуйте этот код.

export default {
  name: 'radioButtons',
  data () {
      return {
      radio_data: {
        'question_1': '',
        'question_2': '',
        'question_3': ''
      },
      questions: [
          { question: 'Question 1', variable: 'question_1'},
          { question: 'Question 2', variable: 'question_2'},
          { question: 'Question 3', variable: 'question_3'}
      ]
    }
  },
}

<template>
  <div id="radioButtons">
  <div v-for="(question_obj, index) in questions" :key="index" class="form-group form-radio">
    <span>{{ question_obj.question }} {{ question_obj.variable }}</span>
    <br>
    <label>
      <input type="radio" :name="'question-' + index" v-model="radio_data[questions[index].variable]" value="yes" :checked="question_obj.variable == 'yes'">
      <span>Yes</span>
    </label>
    <label>
      <input type="radio" :name="'question-' + index" v-model="radio_data[questions[index].variable]" value="no" :checked="question_obj.variable == 'no'">
      <span>No</span>
  </label>
  </div>
  </div>
</template>

Answer 2

Храните ваш ключ, вопрос и ответ в одном и том же объекте в вашем наборе вопросов. Если вы хотите получить выбранные значения как объект, используйте метод, чтобы уменьшить их до соответствующего значения. В приведенном ниже примере кода я включил такой метод, а также вывод в реальном времени JSON, чтобы увидеть результат.

<code><template>
  <div id="radioButtons">
    <div v-for="row in questions" :key="row.key" class="form-group form-radio">
      <span>{{ row.question }} {{ row.key }}</span>
      <br>
      <label>
        <input type="radio" :name="row.key" v-model="row.answer" value="yes" >
        <span>Yes</span>
      </label>
      <label>
        <input type="radio" :name="row.key" v-model="row.answer" value="no" >
        <span>No</span>
      </label>
    </div>
    <pre>{{ JSON.stringify(getAnswers(), null, 2) }}

экспорт по умолчанию { название: 'radioButtons', данные () { вернуть { вопросы: [ {ключ: 'вопрос_1', вопрос: 'вопрос 1', ответ: ноль}, {ключ: 'вопрос_2', вопрос: 'вопрос 2', ответ: ноль}, {ключ: 'вопрос_3', вопрос: 'вопрос 3', ответ: ноль} ] } }, методы: { getAnswers () { вернуть this.questions.reduce ((acc, cur) => { acc [cur.key] = cur.answer возврат акк }, {}) } } }

Answer 3

Используйте индекс в v-for для изменений v-модели, чтобы он изменял свойства объекта вопроса, а не их экземпляр:

new Vue({
  el: '#app',
  data () {
      return {
      //question_1: '', //don't need question_1, 2 and 3
     // question_2: '',
     // question_3: '',
      questions: [
        { question: 'Question 1', variable: 'no'}, //notice that I have stored default values in question. Also consider renaming variable to answer to preserve good semantics. 
        { question: 'Question 2', variable: 'yes'},
        { question: 'Question 3', variable: 'no'},
      ]
    }
  },
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>



<div id="app">
 <div id="radioButtons">
    <div v-for="(question_obj, index) in questions" :key="index" class="form-group form-radio">
      <span>{{ question_obj.question }} {{ question_obj.variable }}</span>
      <br>
      <label>
        <input type="radio" :name="'question-' + index" v-model="questions[index].variable" value="yes" :checked="question_obj.variable == 'yes'">
        <span>Yes</span>
      </label>
      <label>
        <input type="radio" :name="'question-' + index" v-model="questions[index].variable" value="no" :checked="question_obj.variable == 'no'">
        <span>No</span>
      </label>
    </div>
  </div>


</div>

Примечание: Нет необходимости хранить ответы в вопросах_1, вопрос_2, вопрос_3, поскольку у вас может быть более 3 вопросов, иэто не будет эффективным.Лучше всего хранить ответ в значении переменной свойства.

Итак, в компоненте это будет выглядеть так:

<template>
    <div id="radioButtons">
        <div v-for="(question_obj, index) in questions" :key="index" class="form-group form-radio">
            <span>{{ question_obj.question }} {{ question_obj.variable }}</span>
            <br>
            <label>
                <input type="radio" :name="'question-' + index" v-model="questions[index].variable" value="yes" :checked="question_obj.variable == 'yes'">
                <span>Yes</span>
            </label>
            <label>
                <input type="radio" :name="'question-' + index" v-model="questions[index].variable" value="no" :checked="question_obj.variable == 'no'">
                <span>No</span>
            </label>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'radioButtons',
        data () {
            return {
                //question_1: '', //don't need question_1, 2 and 3
                // question_2: '',
                // question_3: '',
                questions: [
                    { question: 'Question 1', variable: 'no'}, //notice that I have stored default values in question. Also consider renaming variable to answer to preserve good semantics.
                    { question: 'Question 2', variable: 'yes'},
                    { question: 'Question 3', variable: 'no'},
                ]
            }
        },
    }

</script>

<style>
</style>