Implementing Vue Js checkboxes using dynamic JSON data

Question

Implementing Vue Js checkboxes using dynamic JSON data

I have a product search page where users can filter based on selected category.

When a category is chosen, the API returns the following response:

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

The Select fields are checkboxes allowing for multiple selections, while the Range fields require users to select a minimum and maximum value.

To create the checkboxes, I have implemented the following code:

<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 retrieve the values of all checked options in termQualities?

Is there a way to create an array of checkboxes to store all selected values?

I am aiming for something similar to this example, with the only difference being that the sidebar filters change based on the product category.

Thanks!

javascript vue.js

Answer 1

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 filter fields once customfields are obtained from the server
        // Example: using axios 
        // this.$axios.get('/customfields')
        // .then(res=>{
        //   this.initialize_selected();
        // })
        this.initialize_selected();


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

<div id="app">
    <!-- Display only after 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3858696b3c1dd8b">[email protected]</a>/dist/vue.js"></script>

Answer 2

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 filter fields once customfields are obtained from the server
        // Example: using axios 
        // this.$axios.get('/customfields')
        // .then(res=>{
        //   this.initialize_selected();
        // })
        this.initialize_selected();


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

<div id="app">
    <!-- Display only after 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3858696b3c1dd8b">[email protected]</a>/dist/vue.js"></script>

Implementing Vue Js checkboxes using dynamic JSON data

Answer №1

Similar questions

I need help getting my Vue.JS project to function properly when it is deployed on a server

Perform multiple function invocations on a single variable using JavaScript

How can I make sure certain properties in the Vuex store don't retain their state after a redirect during server-side rendering (SSR)?

Adjusting the view of an OpenLayers3 map to encompass various vector layers

Retrieving Distinct Values in CouchDB

Steps for exporting all elements of an array to an Excel file using the exceljs library in Node.js

What methods can be used to replicate a network delay while conducting unit tests for an AngularJS controller?

The process of isolating each variable within a JSON data structure

Transferring information from the service layer to the controller

When trying to access an array directly within an object, it all too often returns as undefined

Ensure that the video continues playing from where the host left off instead of restarting from the beginning upon reloading

Utilizing the jexcel plugin to seamlessly integrate arrays for a personalized subtitle editing experience

Utilizing JavaScript in Protractor, explore a list to identify the selected checkboxes and those that remain unchecked

What is the best way to locate the closest element using JavaScript?

Debugging in Javascript involves pausing or breaking at every instance of a javascript function being called

Backand - How can I display the contents of variables using console.log() within Security Actions?

Using Jquery to input selected dropdown values into a text input field

Issue: $controller:ctrlreg The controller named 'HeaderCntrl' has not been properly registered

Meteor - ensuring you're not running two separate React versions

Having trouble accessing my fullstack Vue and Express app due to login application error