动态生成的复选框在应用 v-model 时单击一个时全部被选中

Question

我有一些动态生成的复选框，一旦其中一个复选框被单击，其他复选框都会被选中，反之亦然。但这只发生在与 v-model 绑定时。我很好奇，因为我以前使用过相同的样式，并且效果很好。

这里有一些片段

<div v-for="deduction in deductions" :key="deduction.id" class="form-check form-check-inline">
<input class="form-check-input" :name="deduction.title" v-model="salaryForm.selectedDeductions"  v-bind:value="deduction" :id="deduction.id" type="checkbox">
<label class="form-check-label" for="inlineCheckbox1">{{ deduction.title }}</label>
</div>
               
<div>{{ salaryForm.selectedDeductions}}</div>

这是我的数据

<script>
    export default {
        data() {
            return {
               deductions: [{
        "id": 2,
        "title": "Pension",
        "isPercent": 1,
        "percentage": 2,
        "isActual": 0,
        "actual": null,
        "created_at": "2021-07-28T17:44:05.000000Z",
        "updated_at": "2021-07-28T18:52:36.000000Z"
    },
    {
        "id": 3,
        "title": "Lateness",
        "isPercent": 0,
        "percentage": null,
        "isActual": 1,
        "actual": 400,
        "created_at": "2021-07-28T18:22:50.000000Z",
        "updated_at": "2021-07-28T18:28:55.000000Z"
    },
    {
        "id": 6,
        "title": "Housing",
        "isPercent": 1,
        "percentage": 3.2,
        "isActual": 0,
        "actual": null,
        "created_at": "2021-07-28T19:53:08.000000Z",
        "updated_at": "2021-07-28T19:53:08.000000Z"
    },
    {
        "id": 7,
        "title": "Car",
        "isPercent": 1,
        "percentage": 2,
        "isActual": 0,
        "actual": null,
        "created_at": "2021-07-28T20:14:04.000000Z",
        "updated_at": "2021-07-28T20:14:04.000000Z"
    },
    {
        "id": 8,
        "title": "Medical",
        "isPercent": 0,
        "percentage": null,
        "isActual": 1,
        "actual": 5000,
        "created_at": "2021-07-28T20:14:48.000000Z",
        "updated_at": "2021-07-28T20:14:48.000000Z"
    },
    {
        "id": 9,
        "title": "Transportation",
        "isPercent": 0,
        "percentage": null,
        "isActual": 1,
        "actual": 2000,
        "created_at": "2021-07-28T20:16:29.000000Z",
        "updated_at": "2021-07-28T20:16:29.000000Z"
    }] 
               salaryForm: new Form ({
                  id: '',
                  name: '',
                  salary: '',
                  commission: 0,
                  selectedDeductions: [ ],
                  amount_to_paid: '',
                  comment: '',

              }),
            }
        },

感谢您的宝贵时间。

Answer 1

好的，有道理。我现在看到的唯一问题是您将表单对象包含在 new Form 中，首先您的示例代码中未定义表单，因此我假设您打算使用 FormData 或其他一些我不熟悉的图书馆。如果是这种情况，并且您打算使用 FormData 将数据发送回您的服务器。然后你应该在发出 API 请求时包含你的对象。

因此您的数据将更改为将表单对象定义为

 data() {
    return {
      salaryForm: {
        id: "",
        name: "",
        salary: "",
        commission: 0,
        selectedDeductions: [],
        amount_to_paid: "",
        comment: "",
      },
   }
}

然后在您的 API 调用中，您将使用内置的 FormData class 来 post 返回服务器。

const formData = new FormData();
Object.keys(this.salaryForm).forEach((key) =>
  formData.append(key, this.salaryForm[key])
);
//Make API request

这里有一个 codebox 和一个例子

Answer 2

您正在使用 Multiple checkboxes，您必须在 v-model 中提供一个数组，该数组将包含选定的复选框值。而在这里你发送一个不会绑定到的预设数组值。

只是说如果您可以在 salaryForm 中有另一个数组（已选择：[]），它将接收所有选定的复选框值，它将起作用。

<input 
class="form-check-input"  
:name="deduction.title"  
v-model="salaryForm.selected"   
v-bind:value="deduction"  
:id="deduction.id"  
type="checkbox">

...

 data() {
        return {
           salaryForm: new Form ({
              id: '',
              name: '',
              salary: '',
              commission: 0,
selected:[],
                  selectedDeductions: [
    {
        "id": 2,
        "title": "Pension",
        "isPercent": 1,
        "percentage": 2,
        "isActual": 0,
        "actual": null,
        "created_at": "2021-07-28T17:44:05.000000Z",
        "updated_at": "2021-07-28T18:52:36.000000Z"
    },
    ...
        ],
          

amount_to_paid: '',
              comment: '',
              }),
            }

Answer 3

数据中声明的Form对象没有响应（没有响应属性）。将表单数据声明为简单对象，并构建表单 new Form(this.salaryForm)。提交时。

有关响应属性的更多详细信息，请参阅here。

var app = new Vue({
  el: '#app',
  data() {
    return {
      deductions: [{
          "id": 2,
          "title": "Pension",
          "isPercent": 1,
          "percentage": 2,
          "isActual": 0,
          "actual": null,
          "created_at": "2021-07-28T17:44:05.000000Z",
          "updated_at": "2021-07-28T18:52:36.000000Z"
        },
        {
          "id": 3,
          "title": "Lateness",
          "isPercent": 0,
          "percentage": null,
          "isActual": 1,
          "actual": 400,
          "created_at": "2021-07-28T18:22:50.000000Z",
          "updated_at": "2021-07-28T18:28:55.000000Z"
        },
        {
          "id": 6,
          "title": "Housing",
          "isPercent": 1,
          "percentage": 3.2,
          "isActual": 0,
          "actual": null,
          "created_at": "2021-07-28T19:53:08.000000Z",
          "updated_at": "2021-07-28T19:53:08.000000Z"
        },
        {
          "id": 7,
          "title": "Car",
          "isPercent": 1,
          "percentage": 2,
          "isActual": 0,
          "actual": null,
          "created_at": "2021-07-28T20:14:04.000000Z",
          "updated_at": "2021-07-28T20:14:04.000000Z"
        },
        {
          "id": 8,
          "title": "Medical",
          "isPercent": 0,
          "percentage": null,
          "isActual": 1,
          "actual": 5000,
          "created_at": "2021-07-28T20:14:48.000000Z",
          "updated_at": "2021-07-28T20:14:48.000000Z"
        },
        {
          "id": 9,
          "title": "Transportation",
          "isPercent": 0,
          "percentage": null,
          "isActual": 1,
          "actual": 2000,
          "created_at": "2021-07-28T20:16:29.000000Z",
          "updated_at": "2021-07-28T20:16:29.000000Z"
        }
      ],
      salaryForm: {
        id: '',
        name: '',
        salary: '',
        commission: 0,
        selectedDeductions: [],
        amount_to_paid: '',
        comment: '',
      },
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <pre>{{ salaryForm.selectedDeductions.map(o => o.title) }}</pre>

  <div v-for="deduction in deductions" :key="deduction.id" class="form-check form-check-inline">
    <input class="form-check-input" :name="deduction.title" v-model="salaryForm.selectedDeductions" v-bind:value="deduction" :id="deduction.id" type="checkbox">
    <label class="form-check-label" for="inlineCheckbox1">{{ deduction.title }}</label>
  </div>

</div>

动态生成的复选框在应用 v-model 时单击一个时全部被选中

Dynamic generated checkboxes all is checked when one is clicked when v-model is applied

javascript

checkbox

vue.js