来自json数据的Vue Js复选框模型

Question

我有一个产品搜索页面，其中包含基于所选类别的过滤器。

根据用户选择的类别，我会从 api 获得以下响应

  "customFields":{
     "select":{
        "brand":{"options":[ "nike", "adidas","puma"]},
        "colour":{"options":["black","grey","white"]
     },
     "range":{
        "price":{"options":["0","100","1000"]
     }
  }

Select 字段是复选框，用户可以在其中选择多个选项进行搜索和 Range 用户选择最小值和最大值。所以 2 个下拉菜单，一个是最小值，第二个是最大值。

我创建了如下复选框

<div class="form-row" v-for="(selectField, index) in selectCustomFields">
    <div class="overflow-auto options-list" v-for="(value, name) in selectField.options">
        <label class="custom-control custom-checkbox mb-3">
            <input type="checkbox" class="custom-control-input" v-model="index" :value="value" @click="onChange($event)">
            <span class="custom-control-label">
                <span class="text-dark">{{ value }}</span>
            </span>
        </label>
   </div>
</div>

如何获取termQualities的所有选中选项的值？

如何创建复选框数组以便获取所有选定的值？

我正在尝试实现类似this 的目标，唯一的区别是侧边栏过滤器会根据产品类别进行更改。

谢谢

Answer 1

new Vue({
      el : "#app",
      data : () => ({
        customFields : {
            select : {
                brand : {
                    options : ["nike","adidas","puma"]
                },
                colour : {
                    options : ["black","grey","white"]
                }
            },
            range : {
                price : {
                    options : [0,100,1000]
                }
            }
        },
        selected : null,
      }),
      methods : {
        initialize_selected(){
          var selected = {};
          for(var e in this.customFields){
            for(var f in this.customFields[e]){
              if(e=='range'){
                selected[f] = {min : null, max : null};
              }
              else{
                selected[f] = [];
              }
            }
          }
          this.selected = selected;
        }
      },
      mounted(){
        // Initialize data.selected based on your filter fields you can do this after you get customfields from server
        // For eg : if you use axios : 
        // this.$axios.get('/customfields')
        // .then(res=>{
        //   this.initialize_selected();
        // })
        this.initialize_selected();


        setTimeout(() => {
          console.clear();
        }, 1);
      }
    })

<div id="app">
    <!-- Show this only if selected is initialized -->
    <div v-if="selected" v-for="(each, key) in customFields">
      <div v-if="key=='select'">
        <div v-for="(option, subkey) in each">
          Select {{subkey}}
          <p>
            <div v-for="optiondata in option['options']">
              <label for="optiondata">{{optiondata}}</label>
              <input type="checkbox" :id="optiondata" :value="optiondata" v-model="selected[subkey] ">
            </div>
          </p>
        </div>
      </div>
      <div v-else-if="key=='range'">
        <div v-for="(option, subkey) in each">
          Select {{subkey}}
          <p>
            <label for="min">Min</label>
            <select id="min" v-model="selected[subkey]['min']">
              <option v-for="optiondata in option['options']">{{optiondata}}</option>
            </select>
            <label for="max">Max</label>
            <select id="min" v-model="selected[subkey]['max']">
              <option v-for="optiondata in option['options']">{{optiondata}}</option>
            </select>
          </p>
        </div>
      </div>
    </div>
    <div style="width: 100%; border : 1px solid grey"></div>
    <div>
      Selected Data : <pre>{{selected}}</pre>
    </div>    
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>