Vue公司JS2父母和孩子複選框

-2

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

如何實現的方法，所以當我查看/取消大陸複選框會檢查/取消選中所有國家的複選框嗎？另外，如果我取消選中一個國家/地區複選框，則取消選中相應的大陸複選框。

來源

2017-08-28 Adam Marczyk

你在問什麼太大想在這裏做。檢查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; 
    }); 
}

再次，這是不是一個可行的解決方案 - 這將只是給你一個頭了把你的路要走。

來源

2017-08-28 11:48:49

你應該做的第一件事是價值觀和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: [] 
    },

這些陣列作爲服務我們複選框的標記：如果它們包含單個複選框的值，它將被檢查。在開始時他們都是空的。

在接下來的步驟中，我們應該爲子區域創建一個偵聽器複選框和一個用於檢查該子區域的所有國家複選框的函數。讓我們先添加一個點擊收聽到我們的次區域：

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

，然後指定方法（只要你不使用ES6，我需要委派「這個」變量）：

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

來源

2017-08-28 11:51:54

Vue公司JS2父母和孩子複選框

回答

相關問題