JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script src="https://unpkg.com/[email protected]/he.js"></script>
<div id="app">
  <template v-for="prop in items">
                <dt>{{prop.name}}</dt>
                <dd v-for="op in prop.options">
                    <input type="checkbox" :value="op" v-model="selectedProperties">{{op.value}}
                </dd>
            </template>
  {{selectedProperties}}<br />
  {{foos}}
</div>

JavaScript

new Vue({
  el: '#app',
  computed:{
  	foos(){
      return this.selectedProperties.map(item => item.value);
    }
  },
  data() {
    return {
      selectedProperties: [],
      items: [
                    {
                        "name": "容量", "type": 1, "options": [
                            { "id": "1", "value": "64G" },
                            { "id": "2", "value": "256G" }
                        ]
                    },
                    {
                        "name": "颜色", "type": 1, "options": [
                            { "id": "3", "value": "金色" },
                            { "id": "4", "value": "红色" }
                        ]
                    },
                    {
                        "name": "网络类型", "type": 1, "options": [
                            { "id": "5", "value": "4G全网通" },
                            { "id": "6", "value": "4G电信" },
                            { "id": "7", "value": "4G移动" }
                        ]
                    },
                    {
                        "name": "套餐类型", "type": 1, "options": [
                            { "id": "8", "value": "普通套餐" },
                            { "id": "9", "value": "高级套餐" }
                        ]
                    }
                ]
    }
  }
})