如何将两种输入的值绑定到Vuejs中的单个数组

Question

在使用 Vuejs 的网络表单中，我想实现一个多项选择题，每个项目都有一个子问题。

例如，问题可能如下所示：

您使用什么类型的车辆，多久使用一次？

A) 飞机（复选框），每天/每月一次/每年一次（无线电），

B) 火车（复选框），每天/每月一次/每年一次（广播），

C) 驴子（复选框），每天/每月一次/每年一次（无线电），

D)（等等）。

我可以想象我的 html 可能看起来像这样：

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

我的 Vue 实例将 listOfVehicles 和 listOfSubQuestions 作为我的数据中的数组。 理想情况下，我希望将所有受访者的输入存储在一个名为 answers 的数组中。

例如，如果已勾选答案 A 和 C，则答案可能类似于：[{vehicle: 'A', frequency: 'Once a year'},{vehicle: 'C', frequency: 'Every day'}]。

但我不知道如何进行这项工作。

Answer 1

如果这是您需要的，我很快就做了一些东西。第一次回答问题，希望能帮到你。 您可以在每次单击按钮时添加一个按钮并存储一个新对象， 这可能会导致类似于您提到的示例。

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>