如何在Vue的动态表单中向特定输入添加更改事件？

<template>
  <div>
    <div v-for="(field, index) in formFields" :key="index">
      <label :for="`input-${index}`">{{ field.label }}</label>
      <input
        :id="`input-${index}`"
        :type="field.type"
        v-model="field.value"
        @input="handleInput(index, $event)"
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const formFields = ref([
      { label: 'Name', type: 'text', value: '' },
      { label: 'Email', type: 'email', value: '' },
      // 更多字段...
    ]);

    const handleInput = (index, event) => {
      // 更新特定字段的值
      formFields.value[index].value = event.target.value;
      // 可以在这里执行其他逻辑，比如验证或提交数据
    };

    return {
      formFields,
      handleInput
    };
  }
};
</script>

<input
  :id="`input-${index}`"
  :type="field.type"
  v-model="field.value"
  @change="handleChange(index, $event)"
/>