Как сделать счетчик chekbox, в поле methods?

Question

[Kist9]

Привет всем , помогите сделать счетчик checkbox , чтобы при значении checked == true , он добавлялся в массив , а при false элемент массива удалялся(любой) , я новичок во vue , возможно я делаю что-то не так , объясните если есть возможность , но суть в том что мне нужно данный массив с числом выбранных checkbox передать к родителю на верх , поэтому нужно эмитить событие , а по другому я делать это пока что не умею , я выстроил такую логику , что я проверяю событие @change на значение true false , если данное событие верно то прокидываю value в массив , а если нет , то убираю элемент из списка(любой) , любой потому , что я буду считывать лишь длину списка.Вобщем помогите зеленому доработать скрипт:D

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

<script>

    export default {
        data() {
            return {
                names: [

                ]
            }
        },
        methods: {
            changed(checked , value) {
                if (checked == true) {
                    this.names.push(value)
                    
                }
                this.$emit('change' , this.names)
            }
        }
    }
    
</script>

Comments

[Smirator]

Если правильно понял вопрос, то тут есть на него ответ: https://stackoverflow.com/questions/52873949/vue-c...

[SymphoGraph]

я буду считывать лишь длину списка

это лучше сделать при помощи computed

Answer 1

[SymphoGraph]

я буду считывать лишь длину списка

В большинстве случаев, массив со значениями придётся вернуть на сервер.
Поэтому не надо ничего из него удалять или добавлять.
Передавать через emit ничего не нужно. Если правильно сделать, всё передаётся само.

Родитель

<template>
  <Test1Child></Test1Child>
</template>

<script setup>
import Test1Child from "components/Test/Test1Child.vue";
import {provide, ref} from "vue";

const persons = ref([
  {id: 1, name: 'Василенко Пётр Владимирович', checked: true},
  {id: 2, name: 'Ерёменко Владислав Игоревич', checked: false},
  {id: 3, name: 'Антонова Елена Сергеевна', checked: true},
])
provide('persons', persons)
</script>

Потомок

<template>
  <div class="divRadio">
    <template v-for="person in persons" :key="person.id">
      <Test1Person :person="person"></Test1Person>
    </template>
  </div>
<div>Отмечено:{{ countCheckedPersons }}</div>
</template>

<script setup>
import {computed, inject} from "vue";
import Test1Person from "components/Test/Test1Person.vue";

const persons = inject('persons')
const countCheckedPersons = computed(() => {
  return persons.value.filter(el => el.checked === true).length
})
</script>

Компонент элемента

<template>
  <div class="divus" style="margin-top: 0px;">
    <input type="checkbox"
           :id="'name' + personMutable.id"
           :value="personMutable.id"
           class="checkus"
           :checked="personMutable.checked"
           @change="personMutable.checked = !personMutable.checked"
    />
    <label :for="'name' + personMutable.id" class="labelus">{{ personMutable.name }}</label>
  </div>
</template>

<script setup>

import {ref} from "vue";

const props = defineProps({
  person: Object
})
const personMutable = ref(props.person)
</script>