to bind values from input radio button generated by v-for.
there is tried use v-model to bind them with variables question_1, question_2, question_3 in 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>
I would like the value to be saved in data () after selecting the radio button.
Solution :
Use index in v-for for v-model changes so it changes question object properties, not their instance:
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 there is 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>
Note: There is no need to store answers in question_1, question_2, question_3, since you might have more than 3 questions, and it won’t be efficient.
Better way is to store answer in variable property value.
So in component it will look like this:
<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 there is 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>
Solution 2:
Try this code.
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>
Solution 3:
Store the key, question, and answer in the same object in the array of questions. If you want to get the selected values as an object, use a method to reduce them into an appropriate value. In the example code below I’ve included such a method, as well as live JSON output to see the result.
<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>