vue实现选中列表功能

Posted 2020-11-17 lwj820876312

<template>
  <div>
    <ul 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>
    </ul>
  {{selectedProperties}}<br />
  {{foos}}
  </div>
</template>

<script>
export default {
  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": "高级套餐" }
                        ]
                    }
                ]
    }
  }
    }

</script>