Currently working on a feature to create a checkbox that allows only one selection.
<div id="app">
<div v-for="(question, index) in questions">
<input type="checkbox" value="question.value" v-model="additional_grouped" @change="uniqueCheck"> {{question.title}}
</div>
{{ result }}
</div>
Snippet of my JavaScript:
new Vue({
el: '#app',
data() {
return {
additional: [],
additional_grouped: [],
questions: [
{
title: 'A',
value: 0
},
{
title: 'B',
value: 1
},
{
title: 'C',
value: 2
}
]
}
},
computed: {
result: function(){
return this.additional.concat(this.additional_grouped);
}
},
methods: {
uniqueCheck(e){
console.log(e)
this.additional_grouped = [];
if (e.target.checked) {
this.additional_grouped.push(e.target.value);
}
}
}
});
Here is the original outcome.
https://i.sstatic.net/0BGtX.png
Aiming to achieve a result similar to this.
https://i.sstatic.net/iRMJK.png
While there are other methods available, I prefer utilizing the v-for method due to the volume of data. How can I ensure only one value is checked in v-for?
Check out my code on CodePen: enter link description here