vue3 把多个输入框的值组合成对象

在Vue3中，你可以使用v-model指令以及 computed 或者 watch 属性来实现将多个输入框的值组合成一个对象。以下是一个简单的例子：

<template>
  <div>
    <input v-model="inputs.name">
    <input v-model="inputs.age">
    <!-- 更多 input 元素... -->
    <button @click="combineInputs">组合输入</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputs: {
        name: '',
        age: ''
        // ...添加更多的键值对
      },
    };
  },
  methods: {
    combineInputs() {
      this.combinedObject = { ...this.inputs };
      // 如果你想处理其他操作，比如校验或者转换数据格式，可以在这里添加
    },
  },
  // 使用 watch 监听输入变化并实时更新对象，这里仅示例如何监听 inputs 名称的变化
  watch: {
    'inputs.name': function (newVal) {
      // 更新 combinedObject 的name属性
      this.combinedObject.name = newVal;
    }
  },
};
</script>

在这个例子中，`v-model`将每个输入框的值绑定到`inputs`对象上。当你点击"组合输入"按钮时，会复制整个`inputs`对象到`combinedObject`变量中。如果你需要实时监控和响应输入的变化，还可以利用`watch`。