How to bind the values of two types of inputs to a single array in Vuejs - vuejs2

Question

In a web form, using Vuejs, I would like to implement a multiple choice question with a sub-question for each item.
For instance, the question could look like this:
What type of vehicle do you use, and how often ?
A) Aeroplane (chekbox), Every day / Once a month / once a year (radio),
B) Train (checkbox), Every day / Once a month / Once a year (radio),
C) Donkey (checkbox), Every day / Once a month / Once a year (radio),
D) (and so on).
I can imagine that my html could look something like this :
<div class="form-group">
<div class="line" v-for="(type, index) in listOfVehicles">
<input type="checkbox" v-bind:value="index" v-bind:id="index" v-model="???">
<label v-bind:for="index">{{type}}</label>
<div class="subquestion" v-for="(sub, id) in listOfSubQuestions">
<input type="radio"
v-bind:value="id"
v-bind:id="'sub-' + index + '-' + id"
v-model="???">
<label v-bind:for="'sub-' + index + '-' + id">{{sub}}</label>
</div>
</div>
</div>
where my Vue instance would have listOfVehicles and listOfSubQuestions as arrays in my data.
Ideally, I would like all the respondent's input to be stored in a single array called for instance answers.
As an example, if answers A and C have been ticked, answers could look something like: [{vehicle: 'A', frequency: 'Once a year'},{vehicle: 'C', frequency: 'Every day'}].
But I have no clue how to make this work.

Answer 1

I quickly made something if this is what you need. Its my first time answering a question hope this can help you out. You can add a button and store a new object every-time you click the button,
which can result something like the example you mentioned.
new Vue({
el: "#app",
data: {
vehicle: [],
frequency: '',
result: []
},
methods: {
save() {
const result = {
vehicle: this.vehicle,
frequency: this.frequency
}
this.result.push(result)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>What type of vehicle do you use, and how often ?</h2>
<div>
<label for="plane">Aeroplane</label>
<input id="plane" type="checkbox" value="aeroplane" v-model="vehicle">
<label for="car">car</label>
<input id="car" type="checkbox" value="car" v-model="vehicle">
<label for="train">train</label>
<input id="train" type="checkbox" value="train" v-model="vehicle">
<div>
<label for="plane">everyday</label>
<input type="radio" name="options" value="everyday" v-model="frequency">
<label for="plane">monthly</label>
<input type="radio" name="options" value="monthly " v-model="frequency">
<label for="plane">yearly</label>
<input type="radio" name="options" value="yearly" v-model="frequency">
</div>
<button #click="save">submit</button>
<p>{{result}}</p>
</div>
</div>