Vue JS2 Eltern und Kind Kontrollkästchen

Question

Ich habe eine Liste von Listen:

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

Voll Code hier: https://jsfiddle.net/kw1vmvqy/

Wie implementiere ich eine Methode so, wenn ich aktivieren/deaktivieren Sie einen Kontinent Kontrollkästchen alle Kontrollkästchen des Landes aktivieren/deaktivieren? Wenn Sie das Kontrollkästchen eines Landes deaktivieren, wird das entsprechende Kontrollkästchen deaktiviert.

Answer 1

Was Sie fragen, ist zu groß, denke, hier zu tun. Überprüfen Sie this link, um eine Idee zu bekommen. Hier werden Länder unterhalb der Subregion überprüft, wenn eine Subregion überprüft wird. Aber nicht umgekehrt und vollständig. Auf diese Weise können Sie eine dynamische Modellbindung erstellen. Aber es wird ein bisschen langsam sein, da Sie bei jeder Änderung sehr viel durchqueren müssen.

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

Und Skript:

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

Auch dies ist keine funktionierende Lösung - es wird Sie nur ein Heads geben vor Ihrer Reise zu nehmen.

Answer 2

Der erste, was Sie tun sollen, ist es, Werte zu binden und v-Modelle auf Ihre Kontrollkästchen:

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

Und füge Arrays von subregionCheck und countryCheck in Ihren Daten:

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

Diese Arrays dienen als Marker für unsere Checkboxen: Wenn sie den Wert eines einzelnen Kontrollkästchens enthalten, wird dies überprüft. Am Anfang sind beide leer.

Im nächsten Schritt sollten wir ein Listener für Subregion-Checkbox und eine Funktion zur Überprüfung aller Länder-Checkboxen für diese Subregion anlegen. Lassen Sie uns einen Klick Zuhörer hinzufügen zuerst in unseren Subregion:

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

und dann die Methode angeben (sofern Sie nicht ES6 mit, ich brauche „dieses“ Variable zu delegieren):

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

Jetzt brauchen wir eine Methode, um das Kontrollkästchen Subregion zu deaktivieren, wenn eines der Länder nicht markiert ist. Fügen Sie den Klick-Listener Länder Kontrollkästchen:

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

und geben Sie dann das Verfahren:

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