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

我不确定我的问题的标题是否正确，但我会尽量解释得更好，请耐心听我说

所以我在我的组件模板中有一个表单，我在表单中循环通过一个名为水果的对象来显示可用的水果，这样人们就可以勾选他们想要的水果并指出他们想要的数字。下面是表单的外观

这是我的密码

<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绑定到相应数字的核心问题。我的示例演示了如何向每个

水果

对象添加

数量

属性，并更新表单中的数量

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

<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>

挑选水果
#
名称
大小
输入请求的号码
{{fruit.id}
{{fruit.name}
{{fruit.size}
提交
导出默认值{
数据（）{
返回{
水果：[
{
id:1，
名称：'芒果'，
尺码：“大”
},
{
id:2，
名称：'香蕉'，
尺码：“中等”
},
{
id:3，
名称：'苹果'，
尺码：“中等”
},
]
}
},
方法：{
getFruit（）{
//模拟API调用
setTimeout（this.addQuantity（），1000）；
},
添加数量（）{
this.fruits.forEach（水果=>{
此.$套（水果，'数量'，0）；
});
},
submitForm（）{
console.log（this.fruits）；
}
},
创建（）{
这个；
console.log（this.fruits）；
}
}

这就是你要找的吗

selectedFruits

应仅包含当前所选水果的ID-如果您知道这些ID，您总能找到相应的数量。@Mathix420感谢您的回复。实际上不是这样，在这种情况下，数据是预定义的，因此将数据绑定到复选框非常简单。在我自己的情况下，我想知道每种水果的请求数量，因为它们将被新输入。您能否编辑您的问题以显示

水果

或

水果

对象结构/属性？在

data

中，您将

fruits

初始化为空对象，但在模板中将其用作

v-for

中的数组。似乎不一致。@Tim谢谢你的回复。fruits是通过api调用创建DOM时获得的对象。表中循环的是水果数据，用于显示客户可用水果的id、名称和大小。如果你仍然这么认为，我会更新我的问题，以显示数据的结构，但如果看上传的图像，你会看到重要的字段是id、名称和大小。

<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>