Vue页面加载时匹配Checkbox自动勾选并填充输入框的实现咨询

以下是可直接运行的单文件组件完整代码：

<template>
  <div class="form-container">
    <div v-for="item in checkboxOptions" :key="item" class="form-item" style="margin: 8px 0;">
      <label>
        <input type="checkbox" v-model="checkedItems" :value="item">
        {{ item }}
      </label>
      <input 
        v-if="checkedItems.includes(item)" 
        type="number" 
        v-model.number="priceMap[item]" 
        placeholder="请输入价格"
        style="margin-left: 12px; padding: 4px;"
      >
    </div>
    <button @click="handleSubmit" style="margin-top: 16px; padding: 6px 12px;">提交</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      // checkbox可选值列表
      checkboxOptions: ['ACC', 'BCC', 'CCC', 'DCC', 'ECC'],
      // 初始对象数组
      sampleArrayOfObject: [
        { Item: "ACC", Price: 12 },
        { Item: "BCC", Price: 50 },
        { Item: "ECC", Price: 21 }
      ],
      // 存储已选中的checkbox项
      checkedItems: [],
      // 存储每个选项对应的价格
      priceMap: {},
      // 提交后存储最终结果的变量
      newItem: []
    }
  },
  mounted() {
    // 页面加载初始化匹配逻辑
    this.sampleArrayOfObject.forEach(item => {
      if (this.checkboxOptions.includes(item.Item)) {
        this.checkedItems.push(item.Item)
        this.priceMap[item.Item] = item.Price
      }
    })
  },
  methods: {
    handleSubmit() {
      // 生成最终结果，自动过滤价格为空的无效项
      this.newItem = this.checkedItems
        .filter(item => this.priceMap[item] != null && this.priceMap[item] !== '')
        .map(item => ({
          Item: item,
          Price: Number(this.priceMap[item])
        }))
      // 可在此处添加后续提交逻辑，以下为测试打印
      console.log('提交结果newItem：', this.newItem)
    }
  }
}
</script>

逻辑对应说明 #

• 页面加载时会自动遍历初始对象数组，和checkbox可选值匹配的项会自动勾选，同时对应价格预填充到输入框，满足第一条需求
• 勾选任意checkbox后会自动展示对应价格输入框，支持手动修改数值，取消勾选则自动隐藏输入框，满足第二条需求
• 提交时会自动过滤已勾选但价格为空的项，将最终有效数据按指定结构存入newItem变量，满足第三条需求

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