Как сделать счетчик checkbox, vue3?

Question

[Kist9]

Всем привет , помогите пожалуйста сделать счетчик для чекбоксов , который будет пересчитывать значение при любых изменениях чекбоксов.

<template>
    <div class="divRadio">
        <div class="divus" style="margin-top: 0px;">
            <input type="checkbox" id="name1" class="checkus" @click="schetRadio"/>
            <label for="name1" class="labelus">Василенко Пётр Владимирович</label>
        </div>
        <div class="divus">
            <input type="checkbox" id="name2" class="checkus" v-on:change="schetRadio"/>
            <label for="name2" class="labelus">Ерёменко Владислав Игоревич</label>
        </div>
        <div class="divus">
            <input type="checkbox" id="name3" class="checkus" v-on:change="schetRadio" />
            <label for="name3" class="labelus">Антонова Елена Сергеевна</label>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: 'radio-btn',
                schetchik: {
                    schetchik: 0,
                }
            }
        },
        methods: {
            schetRadio() {
                this.schetchik =+ 1;
                this.$emit('schetchik' , this.schetchik)
            }
        }
    }
</script>

Answer 1

[gogowq]

<template>
  <div class="divRadio">
    <div class="divus" style="margin-top: 0px;">
      <input type="checkbox" id="name1" class="checkus" @change="schetRadio" />
      <label for="name1" class="labelus">Василенко Пётр Владимирович</label>
    </div>
    <div class="divus">
      <input type="checkbox" id="name2" class="checkus" @change="schetRadio" />
      <label for="name2" class="labelus">Ерёменко Владислав Игоревич</label>
    </div>
    <div class="divus">
      <input type="checkbox" id="name3" class="checkus" @change="schetRadio" />
      <label for="name3" class="labelus">Антонова Елена Сергеевна</label>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      schetchik: 0,
    };
  },
  methods: {
    schetRadio() {
      this.schetchik = Array.from(document.querySelectorAll('.checkus'))
        .filter((checkbox) => checkbox.checked)
        .length;
      this.$emit('schetchik', this.schetchik);
    },
  },
};

Answer 2

[artem rodionov]

Ваш код содержит несколько ошибок. Вот исправленная версия счетчика для чекбоксов:

```html
<template>
  <div class="divRadio">
    <div class="divus" style="margin-top: 0px;">
      <input type="checkbox" id="name1" class="checkus" v-model="isChecked1" @change="schetRadio" />
      <label for="name1" class="labelus">Василенко Пётр Владимирович</label>
    </div>
    <div class="divus">
      <input type="checkbox" id="name2" class="checkus" v-model="isChecked2" @change="schetRadio" />
      <label for="name2" class="labelus">Ерёменко Владислав Игоревич</label>
    </div>
    <div class="divus">
      <input type="checkbox" id="name3" class="checkus" v-model="isChecked3" @change="schetRadio" />
      <label for="name3" class="labelus">Антонова Елена Сергеевна</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked1: false,
      isChecked2: false,
      isChecked3: false,
      schetchik: 0,
    };
  },
  methods: {
    schetRadio() {
      this.schetchik = 0;
      if (this.isChecked1) {
        this.schetchik++;
      }
      if (this.isChecked2) {
        this.schetchik++;
      }
      if (this.isChecked3) {
        this.schetchik++;
      }
      this.$emit('schetchik', this.schetchik);
    },
  },
};
</script>

```

В этой версии я использовал директиву `v-model` для связывания значения каждого чекбокса с соответствующим свойством `isChecked1`, `isChecked2` и `isChecked3`. При изменении чекбоксов вызывается метод `schetRadio`, который пересчитывает значение `schetchik` в зависимости от состояния каждого чекбокса. Затем он эмитирует событие `schetchik` с обновленным значением.

Обратите внимание, что я также добавил обнуление `schetchik` перед пересчетом, чтобы учесть случаи, когда пользователь сначала выбирает чекбокс, а затем снимает его. Это обеспечивает точное подсчетное значение.