首先，先明确你的需求核心：将复选框对应的ID存入SelectedType数组中对象的PayTypeId字段，同时把该复选框关联的输入框值存入同一个对象的Remarks字段，初始时SelectedType为空数组。

第一步：定义基础数据 #

假设你有一个可选的支付类型列表（如果没有的话，也可以根据实际场景调整），在Vue组件的data中定义如下：

data() {
  return {
    // 可选的支付类型列表，包含ID和名称
    payTypes: [
      { id: 1, name: "支付宝支付" },
      { id: 2, name: "微信支付" },
      { id: 3, name: "银行卡支付" }
    ],
    // 初始为空的选中类型数组，结构完全符合你的要求
    SelectedType: []
  };
}

第二步：模板渲染与绑定 #

在模板中通过v-for循环渲染每个支付类型对应的复选框和输入框，并处理绑定逻辑：

<div v-for="payType in payTypes" :key="payType.id" class="pay-type-item">
  <!-- 复选框：处理选中/取消逻辑，关联支付类型ID -->
  <input
    type="checkbox"
    :id="`pay-type-${payType.id}`"
    :value="payType.id"
    @change="togglePayType(payType, $event.target.checked)"
  >
  <label :for="`pay-type-${payType.id}`">{{ payType.name }}</label>

  <!-- 输入框：绑定对应选中项的Remarks字段，未选中时禁用 -->
  <input
    type="text"
    placeholder="请输入备注"
    v-model="getSelectedItem(payType.id).Remarks"
    :disabled="!isPayTypeSelected(payType.id)"
    class="remarks-input"
  >
</div>

第三步：实现核心方法 #

在组件的methods中定义处理选中状态、获取选中项的方法：

methods: {
  // 判断当前支付类型是否已被选中
  isPayTypeSelected(payTypeId) {
    return this.SelectedType.some(item => item.PayTypeId === payTypeId);
  },

  // 获取对应支付类型的选中项对象（不存在则返回空对象，避免报错）
  getSelectedItem(payTypeId) {
    return this.SelectedType.find(item => item.PayTypeId === payTypeId) || { Remarks: "" };
  },

  // 处理复选框选中/取消的逻辑
  togglePayType(payType, isChecked) {
    if (isChecked) {
      // 选中时，向SelectedType添加新的对象，初始Remarks为空
      this.SelectedType.push({
        PayTypeId: payType.id,
        Remarks: ""
      });
    } else {
      // 取消选中时，从SelectedType中移除对应ID的对象
      this.SelectedType = this.SelectedType.filter(item => item.PayTypeId !== payType.id);
    }
  }
}

关键逻辑说明 #

• 当复选框被选中时，我们会往SelectedType数组中添加一个符合你要求结构的对象：{ PayTypeId: 选中的ID, Remarks: '' }
• 输入框通过v-model直接绑定到对应选中项的Remarks字段，实现双向数据同步
• 未选中的支付类型对应的输入框会被禁用，避免用户输入无效内容
• 通过filter和find方法精准管理SelectedType数组中的对象，确保数据结构始终符合预期

这样就能完美实现你想要的效果：复选框的ID和对应输入框的备注值会被存入同一个数组对象中，你可以随时通过SelectedType获取到完整的选中数据。

内容的提问来源于stack exchange，提问作者Rasik