Question

我有一些代码可以创建动态输入并选择：

$domainserver = "ipaddress1" , "ipaddress2" , "ipaddress3"

foreach ($s in $domainserver)
{
  $domain = Get-AdDomain -Server $s -Credential $Credential

  Get-ADUser -Credential $Credential -Server $s -Filter {Enabled -eq $TRUE} -Properties Name,SamAccountName,LastLogonDate | 
    Where {($_.LastLogonDate -lt (Get-Date).AddDays(-30)) -and ($_.LastLogonDate -ne $NULL)}  | 
      Select-Object -Property Name,SamAccountName,LastLogonDate,@{Label='Domain'; Expression={$domain.DnsRoot}} | 
        Sort-Object LastLogonDate |
          Export-Csv C:\temp\$s.csv -NoTypeInformation
}

这很好用，但是我的问题是我想以某种方式对输入进行分组。如果有多个名称和多个电子邮件，则当它们发送到我的Flask后端时，我可以看到谁的数据是谁的。

当前，如果我要添加3个名字和1个电子邮件，它会像这样到达我的后端：

<div v-for="(index) in rows">
    <select>
        <option selected="true" disabled>Select Type</option>
        <option>Name</option>
        <option>Address</option>
        <option>Email</option>
        <option>Phone</option>
        <option>Medical</option>
        <option>Tax File Number</option>
        <option>Card Number</option>
        <option>Financial Card</option>
        <option>Medical Card</option>
        <option>Social Card</option>
    </select>
    <input type="text" list="predictive_data" class="uk-input">
</div>

<button v-on:click="addRow" type="button">Add Input</button>

如您所见，我无法告诉谁是电子邮件的所有者。我更喜欢这样：

Name:['John Smith', 'Jane Doe', 'Bob Alan'], Email:[coolkid69@email.com]

Answer 1

HTML表单编码（application/x-www-form-urlencoded）不支持这样的对象数组。某些后端（Laravel或Rails）在表单数据中支持特殊的键命名，以对复杂对象进行分组，但是Flask不支持（至少不是开箱即用）。

我认为，最简单的解决方案是Vue客户端以所需格式将表单数据作为JSON发送，而Flask后端将其作为JSON接收（即request.get_json()而不是request.form）

将您的群组分成rows，其中每个row包含分别绑定到<select>.v-model和<input>.v-model的标签和值：

// MyForm.vue template
<fieldset v-for="group in groups" :key="group.id">
  <div v-for="row in group.rows" :key="row.id">
    <select v-model="row.label">...</select>
    <input type="text" v-model="row.value">
  </div>
  <button type="button" @click="addRow(group)">Add Input</button>
</fieldset>

// MyForm.vue script
data() {
  return {
    groups: [
      {
        id: 1,
        rows: [{ id: 1, label: "Name", value: "John Doe" }]
      },
      {
        id: 2,
        rows: [
          { id: 2, label: "Name", value: "Jane Doe" },
          { id: 3, label: "Email", value: "coolkid69@email.com" }
        ]
      },
      {
        id: 3,
        rows: [{ id: 4, label: "Name", value: "Bob Alan" }]
      }
    ]
  };
}

添加一个submit方法来发布您特殊格式的数据：

// MyForm.vue script
methods: {
  submit(e) {
    const formData = this.groups.map(group => group.rows.reduce((c, row) => {
      c[row.label] = row.value;
      return c;
    }, {}));

    axios.post(e.target.action, formData);
  }
}

demo

如何使用Vue对表单数据进行分组

1 个答案: