parents Vue JS2 et cases à cocher enfant

Question

J'ai une liste de listes:

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

code complet ici: https://jsfiddle.net/kw1vmvqy/

Comment puis-je mettre une méthode quand je cocher/décocher un continent case à cocher cochez/décochez toutes les cases à cocher du pays? De même, si je désélectionne un pays, la case à cocher correspondante est décochée.

Answer 1

Ce que vous demandez est trop grand penser à faire ici. Vérifiez this link pour avoir une idée. Ici, les sous-régions sont contrôlées lorsqu'une sous-région est vérifiée. Mais pas vice-versa et complète. Vous pouvez suivre cela de cette façon pour créer une liaison de modèle dynamique. Mais ça va être un peu lent car vous devrez parcourir beaucoup de choses à chaque changement.

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

Et dans le 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; 
    }); 
} 

Encore une fois, ce n'est pas une solution de travail - ça va vous donner une tête de prendre votre voyage à venir.

Answer 2

La première chose que vous devez faire est de lier les valeurs et v-modèles à vos cases à cocher:

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

Et ajouter des tableaux de subregionCheck et countryCheck dans vos données:

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

Ces tableaux servent un marqueur pour nos cases à cocher: si elles contiennent la valeur d'une seule case à cocher, elles seront vérifiées. Au début, les deux sont vides. À l'étape suivante, nous devrions créer une case à cocher listener for subregion et une case permettant de cocher tous les pays pour cette sous-région. Ajoutons un écouteur de clic d'abord à notre sous-région:

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

puis spécifiez la méthode (pour autant que vous ne l'utilisez ES6, je dois déléguer « cette » à la 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); 
     }) 
     } 
    }, 

Maintenant, nous avons besoin d'une méthode pour décocher la case sous-région si l'un de ses pays n'est pas coché. Ajouter l'auditeur de clic pour les pays des cases à cocher:

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

puis spécifiez la méthode:

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); 
    } 
}, 

Working fiddle