"Exploring the functionality of Vue JS2 checkboxes within a parent and

Question

"Exploring the functionality of Vue JS2 checkboxes within a parent and

I am working with a complex nested list structure:

<ul>
      <li v-for="subregion in continents">
        <input type="checkbox" :id="subregion[0].subregion" > <label :for="subregion[0].subregion">{{ subregion[0].subregion }}</label>
        <ul>
          <li v-for="country of subregion">
              <input type="checkbox" :id="country.name" > <label :for="country.name">{{ country.name }} (+{{ country.callingCodes[0]}})</label>
          </li>
        </ul>
      </li>
</ul>

Entire code available on: https://jsfiddle.net/kw1vmvqy/

I'm looking for a way to create a function that will automatically synchronize the checkboxes of countries with their corresponding continent checkboxes. The goal is to ensure that when a continent checkbox is selected or deselected, all associated country checkboxes follow suit, and vice versa. How can I achieve this seamless synchronization between the two levels of checkboxes?

javascript vue.js vuejs2 frontend vue-component

Answer 1

Answer №1

To start off, make sure to connect values and v-models to your checkboxes:

<input type="checkbox" :id="subregion[0].subregion" v-model="subregionCheck" :value="subregion[0].subregion">

<input type="checkbox" :id="country.name" v-model="countryCheck" :value="country.name">

Additionally, include arrays for subregionCheck and countryCheck in your data:

  data: {
    subregions: null,
    countries: null,
    query: '',
    countryList: [],
    subregionCheck:[],
    countryCheck: []
  },

These arrays act as indicators for our checkboxes: if they contain the value of a single checkbox, it will be checked. Initially, both arrays are empty.

Next, we need to set up a listener for the subregion checkbox along with a function to check all country checkboxes related to that subregion. Start by adding a click listener to the subregion checkbox:

<input type="checkbox" :id="subregion[0].subregion" v-model="subregionCheck" :value="subregion[0].subregion" @click="checkAllCountries(subregion)">

Then define the method (since ES6 is not used, "this" needs to be assigned to a variable):

checkAllCountries: function (subregion) {
        var that = this;
        if (this.subregionCheck.indexOf(subregion[0].subregion) > -1) {
            subregion.forEach(function (element) {
              if (that.countryCheck.indexOf(element.name) <= -1) {
                that.countryCheck.push(element.name);
              }
            });
      }
      else {
         subregion.forEach(function (element) {
            that.countryCheck.splice(that.countryCheck.indexOf(element.name), 1);
        })
      }
    },

Now we must create a method to uncheck the subregion checkbox if any of its corresponding countries are unchecked. Add a click listener to the country checkboxes:

<input type="checkbox" :id="country.name" v-model="countryCheck" :value="country.name" @click="checkSubregion(subregion)">

Then define the method:

checkSubregion: function (country) {
  if ((this.countryCheck.indexOf(country.name) <= -1) && this.subregionCheck.indexOf(country.subregion) > -1 ) {
    this.subregionCheck.splice(this.subregionCheck.indexOf(country.subregion), 1);
  }
},

View demo

Answer 2

To start off, make sure to connect values and v-models to your checkboxes:

<input type="checkbox" :id="subregion[0].subregion" v-model="subregionCheck" :value="subregion[0].subregion">

<input type="checkbox" :id="country.name" v-model="countryCheck" :value="country.name">

Additionally, include arrays for subregionCheck and countryCheck in your data:

  data: {
    subregions: null,
    countries: null,
    query: '',
    countryList: [],
    subregionCheck:[],
    countryCheck: []
  },

These arrays act as indicators for our checkboxes: if they contain the value of a single checkbox, it will be checked. Initially, both arrays are empty.

Next, we need to set up a listener for the subregion checkbox along with a function to check all country checkboxes related to that subregion. Start by adding a click listener to the subregion checkbox:

<input type="checkbox" :id="subregion[0].subregion" v-model="subregionCheck" :value="subregion[0].subregion" @click="checkAllCountries(subregion)">

Then define the method (since ES6 is not used, "this" needs to be assigned to a variable):

checkAllCountries: function (subregion) {
        var that = this;
        if (this.subregionCheck.indexOf(subregion[0].subregion) > -1) {
            subregion.forEach(function (element) {
              if (that.countryCheck.indexOf(element.name) <= -1) {
                that.countryCheck.push(element.name);
              }
            });
      }
      else {
         subregion.forEach(function (element) {
            that.countryCheck.splice(that.countryCheck.indexOf(element.name), 1);
        })
      }
    },

Now we must create a method to uncheck the subregion checkbox if any of its corresponding countries are unchecked. Add a click listener to the country checkboxes:

<input type="checkbox" :id="country.name" v-model="countryCheck" :value="country.name" @click="checkSubregion(subregion)">

Then define the method:

checkSubregion: function (country) {
  if ((this.countryCheck.indexOf(country.name) <= -1) && this.subregionCheck.indexOf(country.subregion) > -1 ) {
    this.subregionCheck.splice(this.subregionCheck.indexOf(country.subregion), 1);
  }
},

View demo

Answer 3

Answer №2

Your inquiry poses a significant challenge that cannot be fully addressed here. For more insights, you can refer to this resource. This resource demonstrates how countries under a subregion are checked when the subregion is selected, but the reverse is not implemented completely. By following this approach, you can create dynamic model binding, albeit with a potential drawback of reduced speed due to the requirement of traversing multiple components upon each change.

<ul>
  <li v-for="(subregion, index) in continents">
    <input type="checkbox" :id="subregion[0].subregion" v-on:change="onSubregionChecked(subregion[0].subregion)">
    <label :for="subregion[0].subregion">{{ subregion[0].subregion }}</label>
    <ul>
      <li v-for="country in subregion">
        <input type="checkbox" v-on:change="onCountryChanged(country)" v-model="countryMap[country.alpha3Code].isChecked" :id="country.name">
        <label :for="country.name">{{ country.name }} (+{{ country.callingCodes[0]}})</label>
      </li>
    </ul>
  </li>
</ul>

For implementation in the script:

fetchData: function() {
  var xhr = new XMLHttpRequest();
  var self = this;
  xhr.open('GET', apiURL);
  xhr.onload = function() {
    self.countryList = JSON.parse(xhr.responseText);
    _.each(self.countryList, function(country) {
      self.countryMap[country.alpha3Code] = {
        country: country.alpha3Code,
        isChecked: false,
        subRegion: country.subregion
      };
    });
  };
  xhr.send();
},
onSubregionChecked(val) {
  const self = this;
  self.countryMap = _.mapValues(self.countryMap, function(countryInSubRegion) {
    if (_.isObject(countryInSubRegion) && countryInSubRegion.subRegion === val) {
      countryInSubRegion.isChecked = true;
    }
    return countryInSubRegion;
  });
}

Please note that this is just a conceptual guideline and not a fully functional solution. It aims to provide a starting point for your development journey.

Answer 4

Your inquiry poses a significant challenge that cannot be fully addressed here. For more insights, you can refer to this resource. This resource demonstrates how countries under a subregion are checked when the subregion is selected, but the reverse is not implemented completely. By following this approach, you can create dynamic model binding, albeit with a potential drawback of reduced speed due to the requirement of traversing multiple components upon each change.

<ul>
  <li v-for="(subregion, index) in continents">
    <input type="checkbox" :id="subregion[0].subregion" v-on:change="onSubregionChecked(subregion[0].subregion)">
    <label :for="subregion[0].subregion">{{ subregion[0].subregion }}</label>
    <ul>
      <li v-for="country in subregion">
        <input type="checkbox" v-on:change="onCountryChanged(country)" v-model="countryMap[country.alpha3Code].isChecked" :id="country.name">
        <label :for="country.name">{{ country.name }} (+{{ country.callingCodes[0]}})</label>
      </li>
    </ul>
  </li>
</ul>

For implementation in the script:

fetchData: function() {
  var xhr = new XMLHttpRequest();
  var self = this;
  xhr.open('GET', apiURL);
  xhr.onload = function() {
    self.countryList = JSON.parse(xhr.responseText);
    _.each(self.countryList, function(country) {
      self.countryMap[country.alpha3Code] = {
        country: country.alpha3Code,
        isChecked: false,
        subRegion: country.subregion
      };
    });
  };
  xhr.send();
},
onSubregionChecked(val) {
  const self = this;
  self.countryMap = _.mapValues(self.countryMap, function(countryInSubRegion) {
    if (_.isObject(countryInSubRegion) && countryInSubRegion.subRegion === val) {
      countryInSubRegion.isChecked = true;
    }
    return countryInSubRegion;
  });
}

Please note that this is just a conceptual guideline and not a fully functional solution. It aims to provide a starting point for your development journey.

"Exploring the functionality of Vue JS2 checkboxes within a parent and

Answer №1

Answer №2

Similar questions

Update object properties in Angular controller dynamically

Isotope data-filter not working properly following an Ajax callback

Tips for Customizing Dialogs with CSS Classes in mui5 Using Emotion/Styled

PHP isn't getting the AJAX POST data from the JavaScript file

Top method for identifying browser window modifications such as navigating back, altering the URL, refreshing, or closing the window

What is the best way to continuously run a series of functions in a loop to create a vertical news ticker effect?

Share the hyperlink to a webpage with someone else

Achieving a delayed refetch in React-Query following a POST请求

What is the proper method for effectively employing destructuring?

Is there a way to separate a string using two different delimiters?

Conceal Navigation with jQuery

Generate a visually dynamic representation of a live website page

Can JQuery's 'unslider' be customized to only change the backgrounds?

execute function once eventlistener completes running

What is the best method to retrieve the audio attributes of the currently playing song using the Spotify Web API?

Challenges in developing complex single-page applications

Tips for sequentially arranging and rearranging an array of numbers, even when duplicates are present

Assign a specific value to each object

The promise in app.js at line 51471 was caught with an error stating that the navigation from "/customer/login" to "/customer/dashboard" was cancelled due to a new navigation instance

Utilizing Razor Syntax within VueJs Component