Vue Js checkbox model from json data

Question

I have a product search page with filters based on selected Category.

Depending on selected category by user I get following response from api

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

Select fields are checkboxes where user can select more than one option to search and Range where user selects min and max. So 2 dropdowns, one for minimum and second for maximum.

I have created checkboxes like following

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

How can I get the value of all checked options of termQualities?

How can I create checkbox array so that I can get all selected values?

I am trying to achieve something like this with the only difference that sidebar filters are changed depending on the product category.

Thank you

can u add a fiddle or pen for it with image of ur expected o/p? — Dcoder14
I am trying to create a sidebar filter for an ecommerce website. — Mike Ross

0x4e 0x4e · Accepted Answer · 2020-05-19T07:20:52

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/[email protected]/dist/vue.js"></script>

Vue Js checkbox model from json data

1 Answers