VueのJS2の親と子のチェックボックス

Question

私はリストのリストを持っている：

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

ここ 全コード：私は/チェック大陸のチェックを外したときにそのメソッドを実装するにはどうすればよい https://jsfiddle.net/kw1vmvqy/

チェックボックスをオンにするとチェックボックスがオンになっていますか？また、ある国のチェックボックスをオフにすると、適切な大陸チェックボックスのチェックが外されます。

Answer 1

あなたが求めていることは、あまりにも大きいと思います。アイデアを得るにはthis linkをチェックしてください。サブリージョンがチェックされると、サブリージョン下の国がチェックされます。しかし、その逆ではありません。そうすることで、動的モデル・バインディングを作成できます。しかし、あなたはそれぞれの変更に多くのものをトラバースしなければならないので、少し遅くなるでしょう。

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

、スクリプトで：

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

繰り返しますが、これはワーキングソリューションではありません - それはちょうど先にあなたの旅を取るまであなたに頭を与えるでしょう。

Answer 2

あなたが最初にすべきことは、あなたのチェックボックスに値とV-モデルをバインドすることです：

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

そして、あなたのデータにsubregionCheckとcountryCheckの配列を追加します。

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

これらの配列としての役割を果たすチェックボックスのマーカー：単一のチェックボックスの値が含まれている場合はチェックされます。最初は両方とも空です。

次の手順では、サブリージョンのチェックボックスのリスナーと、このサブリージョンのすべての国のチェックボックスをチェックする関数を作成する必要があります。 （限り、あなたがES6を使用していないとして、私は「この」変数に委任する必要があります）

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

をして、方法を指定します：私たちの部分領域に第1のクリックリスナを追加してみましょう

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

現在、その国のいずれかがチェックされていない場合、チェックボックスのチェックを外す方法が必要です。

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

して、メソッドを指定します：国のチェックボックスにクリックリスナを追加

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