Question

我想绑定由v-for生成的输入单选按钮的值。

我尝试使用v模型将它们与data（）中的变量question_1, question_2, 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_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

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

注意：由于您可能有3个以上的问题，因此无需将答案存储在问题_1，问题_2，问题_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>

Answer 2

尝试此代码。

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 3

将键，问题和答案存储在一系列问题的同一对象中。如果要将选定的值作为对象获取，请使用一种方法将其减小为适当的值。在下面的示例代码中，我包括了这种方法以及实时JSON输出以查看结果。

<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) }}</pre>
  </div>
</template>

<script>
export default {
  name: 'radioButtons',
  data () {
    return {
      questions: [
        { key: 'question_1', question: 'Question 1', answer: null },
        { key: 'question_2', question: 'Question 2', answer: null },
        { key: 'question_3', question: 'Question 3', answer: null }
      ]
    }
  },
  methods: {
    getAnswers () {
      return this.questions.reduce((acc, cur) => {
        acc[cur.key] = cur.answer
        return acc
      }, {})
    }
  }
}
</script>

v-for中的输入绑定

3 个答案: