v-model na checkboxach w pętli Vue

Question

cześć,

tworzę dynamicznie dodawane wiersze formularza w Vue. Wszystko działa tylko mam problem z checkboxami. Jak zaznaczę w jednym wierszu formularza checkbox to sie zaznacza we wszystkich wygenerowanych wierszach formularza. Ma ktoś pomysł jak to rozwiązać? 

<fieldset>
                            <div class="form-row mb-2" v-for="input, index in journal" :key="index">
                                <div class="col-auto">
                                    <label for="date">Data</label>
                                    <Datepicker v-model="input.date" input-class="form-control" :input-attr="{id: 'date', name: 'date'}" style="width: 100%;"/>
                                </div>
                                <div class="col-md-2">
                                    <label for="timeStart">Od</label>
                                      <Datepicker type="time" v-model="input.timeStart" format="HH:mm" input-class="form-control" :input-attr="{id: 'timeStart', name: 'timeStart'}" style="width: 100%;"/>
                                </div>
                                 <div class="col-md-2">
                                    <label for="timeEnd">Do</label>
                                      <Datepicker type="time" v-model="input.timeEnd" format="HH:mm" input-class="form-control" :input-attr="{id: 'timeEnd', name: 'timeEnd'}" style="width: 100%;"/>
                                </div>
                                <div class="col-md-2">
                                    <label for="players">Lista obecności</label>
                                     <div class="form-check" v-for="item in input.players">
                                        <input v-model="item.checked" type="checkbox" class="form-check-input" :id="'id-'+item.id+'set'+index">
                                         <label class="form-check-label" :for="'id-'+item.id+'set'+index">{{ item.fullName }}</label>
                                     </div>
                                </div>
                                <div class="col-auto">
                                    <label for="description">Opis</label>
                                    <textarea v-model="input.description" class="form-control" rows="7" id="description" placeholder="Opis"></textarea>
                                </div>
                                 <div class="col-auto" @click="addInput" v-show="index == journal.length-1 && journal.length < 16">
                                    <ButtonVue style="margin-top: 30px;" title="Dodaj" type="button" cancelWidth="true" color="btn-success"><i class="fas fa-plus"></i></ButtonVue>
                                </div>
                                <div class="col-auto align-self-start" @click="removeInput(index)" v-show="index || ( !index && journal.length > 1)">
                                    <ButtonVue style="margin-top: 30px;" title="Usuń" type="button" cancelWidth="true" color="btn-danger"><i class="fas fa-minus"></i></ButtonVue>
                                </div>
                            </div>
                        </fieldset>

.....

data() {
            return {
                contact: [],
                journal: [
                    {
                        date: "",
                        timeStart: "",
                        timeEnd: "",
                        players: "",
                        description: ""
                    }
                ],
                contacts: [],
            }
        },
methods: {
         
            addInput() {
                this.journal.push({
                    date: "",
                    timeStart: "",
                    timeEnd: "",
                    players: this.contact,
                    description: ""
                });
                console.log(this.journal);
            },
            removeInput(index) {
                this.journal.splice(index, 1);
            },
             getContacts() {

                this.pageLoader = true;
                this.$http.get('/pkpar/get-contacts')
                        .then(({
                        data
                        }) => {
                            this.contacts = data.contacts;
                            for(let i=0; i<this.contacts.length; i++)
                            {
                                this.contact.push({'id': this.contacts[i]['id'], 'fullName' : this.contacts[i]['fullName'], 'checked': true});
                            }    
                            this.journal[0].players = this.contact;
                            this.pageLoader = false;
                        })
                        .catch(error => {
                            console.log(error);
                        });
            },
}

 

Answer 1

Upewnij się, że atrybut name na tych checkboxach ma unikalną wartość (jest różny od pozostałych).

Comments

dodałem unikalne name takie jak id w checkboxach, czy for dla labelów, ale to nic nie daje. Jak zaznaczam / odznaczam checkbox to on sie zaznacza / odznacza przy każdym wystąpieniu pętli.

---

Możesz pokazać screen tych checkboxów (jakichś dwóch najbliższych sobie, żeby było wygodniej je odnaleźć) z DOM Inspectora devtoolsów przeglądarki?

---

screen

Na screenie jest pokazana widać w devtool jedną tablice z checkboxami, ale druga jest taka sama. Na obrazku widać że jak odznaczę checkbox w pierwszym wierszu do w drugim też sie automatycznie odznaczy.

---

Prosiłem o screen z inspektora elementów DOM, a nie konsoli JS-a.

---

screen2

 

---

Ok, czyli jest to kwestia obsługi checkboxów przez Vue, który traktuje je łącznie z powodu użycia tego samego modelu. Generalnie, powinieneś dla każdej grupy (w Twoim kontekście to będzie dany wpis w dzienniku) użyć osobnej tablicy dla osób (property players), żeby pod v-model="item.checked" Vue widział te wartości z osobnych referencji.

Być może da się to w Vue zrobić prościej niż dzielić na osobne grupy.

---

dzięki za pomoc:)

szkoda że to tak działa, bo np. przy input type text albo multi select działą super

A masz pomysł jak to zrobić? Bo myślę i myślę i nic...