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父母和孩子复选框

回答

相关问题