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

您应该做的第一件事是将值和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: []
  },

这些数组用作复选框的标记：如果它们包含单个复选框的值，则会检查它。一开始它们都是空的。

在下一步中，我们应该为subregion复选框创建一个监听器，并检查该子区域的所有国家/地区复选框。让我们先在我们的子区域添加一个点击监听器：

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

然后指定方法（只要你不使用ES6，我需要委托＆＃34;这个＆＃34;到变量）：

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

Answer 2

你所要求的是更大的想法在这里做。检查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;
  });
}

同样，这不是一个有效的解决方案 - 它只是让您有机会提前开始。

Vue JS2父子复选框

2 个答案: