如何将选中的复选框与相应的输入元素绑定到 VueJs 中的数组中

Question

我不确定我的问题标题是否正确，但会尝试更好地解释，请耐心等待。

所以我的组件模板中有一个表单，我在表单中遍历一个名为 fruits 的 object 以显示可用的水果，以便人们可以勾选他们想要的水果并指示他们想要的数字。这是表格的样子

这是我的代码

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header" style="background-color: #4d94d1; color:white;"><h4>Please Enter Details</h4> </div>

                    <div class="card-body">
                        <form>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                            <label for="inputname">Name</label>
                            <input v-model="form.name" type="text" name="name"
                                placeholder="Enter Your Name"
                                class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
                            </div>
                            <div class="form-group col-md-6">
                            <label for="inputemail">Email</label>
                            <input v-model="form.email" type="text" name="email"
                                placeholder="Email"
                                class="form-control" :class="{ 'is-invalid': form.errors.has('email') }">
                            <has-error :form="form" field="email"></has-error>
                            </div>
                        </div>
                        
                        <div class="form-row">
                        
                            <table class="table">
                            <thead>
                                <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Check</th>
                                <th scope="col">Size</th>
                                <th scope="col">Enter Number Requesting</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(fruit, index) in fruits" :key="fruit.id">
                                <th scope="row">{{ index +1 }}</th>
                                <td>{{ fruit.name }}</td>
                                <td><div class="form-group small" >
                                        <input v-model="form.selectedFruits" v-bind:value="fruit.id" type="checkbox" />
                                    </div></td>
                                <td>{{ fruit.size }}</td>
                                <td>
                                    <div class="form-group small" >
                                        <input name="" class="form-control" type="number"  />
                                    </div>
                                </td>
                                </tr>
                            </tbody>
                            </table>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                            <label for="inputphone">Phone</label>
                            <input v-model="form.phone" type="text" name="phone"
                                placeholder="Enter Phone Number"
                                class="form-control" :class="{ 'is-invalid': form.errors.has('phone') }">
                            </div>
                            <div class="form-group col-md-6">
                            <label for="inputaddress">Address</label>
                            <input v-model="form.address" type="text" name="address"
                                placeholder="Enter address"
                                class="form-control" :class="{ 'is-invalid': form.errors.has('address') }">
                            </div>
                        </div>
                        
                        
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                fruits: {},
                form: new Form({
                id: '',
                name: '',
                email: '',
                phone: '',
                address: '',
                selectedFruits: []
                })
            }
        },
        methods: {
            //define method to send an http request using axois to the apiResource
            getFruit() {
            axios.get('api/fruits')
            .then(({data }) => (this.fruits = data));
            }
        },
        created() {
            //On DOM created execute function
            this.getFruit();
        }
    }
</script>

挑战是我似乎不知道如何将所选水果的ID与他们想要的相应数字绑定到selectedFruits中。

PS：我可以绑定选择的水果，但是我需要知道他们想要的每个水果的数量。那就是输入表格的数字。

这是我正在循环的水果数据的数据结构

fruits: [
      {
        id: 1,
        name: 'Mango',
        size: 'Big
      },
      {
        id: 2,
        name: 'Banana',
        size: 'Medium
      },
      {
        id: 3,
        name: 'Apple',
        size: 'Medium
      }
    ]

提前致谢

Answer 1

作为我的评论的后续，我创建了一个单一文件组件来解决将水果的 ID 绑定到相应数字这似乎是您的核心问题。我的示例展示了如何向每个 fruit 对象添加 quantity 属性并更新表单中的数量。

为了简单起见，我简化了表单并删除了复选框跟踪，但您应该能够在表单中使用此功能。

<template>
  <div class="add-object-property">
    <h4>Select Fruit</h4>
    <div class="row">
      <div class="col-md-6">
        <form @submit.prevent="submitForm">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Size</th>
                <th scope="col">Enter Number Requesting</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="fruit in fruits" :key="fruit.id">
                <th scope="row">{{ fruit.id }}</th>
                <td>{{ fruit.name }}</td>
                <td>{{ fruit.size }}</td>
                <td>
                  <div class="form-group small">
                    <input class="form-control" type="number" v-model="fruit.quantity"/>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <button type="submit" class="btn btn-secondary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fruits: [
          {
            id: 1,
            name: 'Mango',
            size: 'Big'
          },
          {
            id: 2,
            name: 'Banana',
            size: 'Medium'
          },
          {
            id: 3,
            name: 'Apple',
            size: 'Medium'
          },
        ]
      }
    },
    methods: {
      getFruit() {
        // Simulate API call
        setTimeout(this.addQuantity(), 1000);
      },
      addQuantity() {
        this.fruits.forEach(fruit => {
          this.$set(fruit, 'quantity', 0);
        });
      },
      submitForm() {
        console.log(this.fruits);
      }
    },
    created() {
      this.getFruit();
      console.log(this.fruits);
    }
  }
</script>

如何将选中的复选框与相应的输入元素绑定到 VueJs 中的数组中

How to bind the checked checkbox with corresponding input element into an array in VueJs

javascript

vue.js

vue-component