element ui动态表单填写身份证带出年龄、性别

在写element ui项目，我想在表单内填写身份证后能自动带出年龄、性别等信息。
表单是封装的，用了父子通信来传值。
目前的情况是我填写身份证以后能带出这些值，但是必须填写任意一个字段才能改变年龄、性别input框里的值，我想填写完身份证以后不需要填写下一个字段，点击其他地方或者回车就能改变其他值。

填写身份证带出年龄、性别的方法

赋值

vue2 ,
我的想法 ，你 填完 身份证 失去焦点 ，只需要 改变 v-model的值 就行。 你这个 又是对象，或许可以试试 set方法

你可以监听身份证输入框的 change 或 blur 事件，当事件触发时，通过身份证号码计算年龄、性别等信息，并将计算结果通过父子通信传递给表单组件。具体实现可以参考以下示例代码：

在表单组件中，定义一个 watch 对象监听来自父组件的值变化：

watch: {
  formData: {
    handler(val) {
      // 更新表单中的年龄、性别等字段
      this.form.age = val.age
      this.form.gender = val.gender
    },
    deep: true
  }
}

在身份证输入框中添加事件监听器：

<el-input v-model="form.idCard" @blur="handleIdCardChange"></el-input>

在组件中添加 handleIdCardChange 方法用于计算年龄、性别等信息，并将计算结果通过父子通信传递给表单组件：

methods: {
  handleIdCardChange() {
    const idCard = this.form.idCard
    if (idCard.length !== 18) return

    // 计算年龄、性别等信息
    const birthYear = parseInt(idCard.substr(6, 4))
    const birthMonth = parseInt(idCard.substr(10, 2))
    const birthDay = parseInt(idCard.substr(12, 2))
    const today = new Date()
    const age = today.getFullYear() - birthYear - (today.getMonth() < birthMonth || (today.getMonth() === birthMonth && today.getDate() < birthDay) ? 1 : 0)
    const gender = parseInt(idCard.substr(16, 1)) % 2 === 1 ? '男' : '女'

    // 将计算结果通过父子通信传递给表单组件
    this.$emit('idCardChange', { age, gender })
  }
}

在父组件中监听子组件的 idCardChange 事件，并将计算结果赋值给表单数据对象的相应属性：

<child-component @idCardChange="handleIdCardChange"></child-component>

...

methods: {
  handleIdCardChange(val) {
    this.formData.age = val.age
    this.formData.gender = val.gender
  }
}

这样，在填写完身份证号码后，当用户离开身份证输入框时，年龄、性别等信息就会自动填充到表单中。

试试 this.$set(‘绑定对象’，‘key’,‘value’)