J'ai un groupe de cases à cocher:

<div class="additions">
  <input type="checkbox" value="10" v-model="additional">
  <input type="checkbox" value="30" v-model="additional">
  <div class="group">
    <input type="checkbox" value="50" v-model="additional">
    <input type="checkbox" value="70" v-model="additional">
  </div>
</div>

Je collecte des valeurs vérifiées dans les données:

new Vue({
  el: '#app',
  data() {
    return {
      additional: [],
    }
  },
});

Impossible de comprendre comment empêcher de cocher plus d'une case à l'intérieur de .group J'ai essayé d'utiliser la radio, mais des choses plus étranges se sont produites, j'ai décidé de m'en tenir aux cases à cocher. Je pourrais le faire dans jQuery ou même vanS JS je pense, mais je ne sais pas où mettre check (sur la méthode d'événement change?). Quelle est la meilleure façon de le faire dans VueJS?

Voici mon stylo: https://codepen.io/RomkaLTU/pen/LXOJgr?editors = 1010

1
RomkaLTU 20 nov. 2018 à 12:40

4 réponses

Meilleure réponse

Merci de m'avoir signalé, mais j'ai choisi la solution sans désactiver l'entrée car cela devient très déroutant pour l'utilisateur final. Ce que j'ai fait:

<input type="checkbox" value="30" v-model="additional">
<input type="checkbox" value="40" v-model="additional">
<input type="checkbox" value="10" v-model="additional_grouped" @change="uniqueCheck">
<input type="checkbox" value="20" v-model="additional_grouped" @change="uniqueCheck">


new Vue({
  el: '#app',
  data() {
    return {
      additional: [],
      additional_grouped: [],
    }
  },
  computed: {
    final: function(){
      return this.additional.concat(this.additional_grouped);
    }
  },
  methods: {
    uniqueCheck(e){
      this.additional_grouped = [];
      if (e.target.checked) {
          this.additional_grouped.push(e.target.value);
      }
    }
  }
});
0
RomkaLTU 20 nov. 2018 à 12:12

Ne pensez pas au DOM, ne pensez pas aux classes. Une habitude difficile à briser, je sais.

<input type="checkbox" value="50" v-model="additional" :disabled="hasAdditional">

computed: {
  hasAdditional() {
    return this.additional.length > 0
  }
}

Utilisez-le comme entrée pour ce que vous essayez de faire. Vous devrez peut-être utiliser un observateur pour détecter les changements et décocher ceux qui ne sont pas autorisés. Vous pouvez également modifier hasAdditional pour renvoyer la somme du nombre d'ajouts, puis l'utiliser pour travailler si vous pouvez sélectionner le groupe.

Ne vous fiez pas aux classes CSS. Utilisez des méthodes, des observateurs et des propriétés calculées pour élaborer la logique.

1
Thomas Edwards 20 nov. 2018 à 09:51

Vous pouvez utiliser différentes manières:

1. :disabled directive

<input type="checkbox" value="20" v-model="additional" :disabled="condition">

En utilisant une condition comme additional.length > 0, vous pouvez désactiver la case à cocher si plus d'une est déjà sélectionnée.

2. Observateurs

data() {
  ...
},
watch: {
  additional(newValue, oldValue) {
    // new additional array value will be here every time any checkbox switched
  }
}
2
Xeelley 20 nov. 2018 à 10:06

Créez simplement une fonction pour effacer la liste des cases à cocher chaque fois que vous sélectionnez une option:

<div class="additions">
<input type="checkbox" value="10" v-model="additional" v-on:click= "check_one()">
<input type="checkbox" value="30" v-model="additional" v-on:click= "check_one()">
</div>
<script>
data(){
return {
additional: [], 
}
},
methods: {
check_one: function(){
this.additional = [];
}       
}
}
</script>
1
user12185134 8 oct. 2019 à 23:57