Vue中带有复选框的动态生成表单答案

【问题标题】：Dynamic generated form with checkbox in VueVue中带有复选框的动态生成表单
【发布时间】：2021-08-19 09:27:06
【问题描述】：

我在 Vue 中有动态生成的表单。每个循环都有 v-model。一切正常。但是当我使用复选框时，v-model 适用于所有循环，而不是像输入类型文本中的一个循环。你能帮我解决这个问题吗？下面是 Vue 代码：

<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: [],
  }
},

方法：

动态表单创建方法

addInput() {
  this.journal.push({
    date: "",
    timeStart: "",
    timeEnd: "",
    players: this.contact,
     description: ""
  });
},

这是从联系人中获取玩家的方法

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);
    });
},

【问题讨论】：

如果您不提供用于生成复选框的players 字段内容的示例，我怀疑任何人都可以帮助您...
我添加了必需的方法。

标签： javascript forms vue.js

【解决方案1】：

您的addInput 方法创建新对象并将其推送到journal 数组中，但是以这种方式创建的每个对象都有一个players 属性，该属性引用相同的数组 (this.contact)

The Difference Between Values and References in JavaScript

最简单（但不是最佳）的处理方式是为每个新的journal 创建数组和内部对象的副本：

addInput() {
  this.journal.push({
    date: "",
    timeStart: "",
    timeEnd: "",
    players: this.contact.map((player) => ({ ...player })),
    description: ""
  });
},

【讨论】：