Vue.js组件v-model不监听事件，动态v-for绑定失效求助

问题根源 #

1. Vue版本差异：你的代码采用Vue2的v-model实现逻辑（value prop + input事件），但Vue3中v-model默认使用modelValue prop和update:modelValue事件。在Vue3项目中，父组件的v-model会传递modelValue而非value，导致子组件要求的必填value prop缺失，同时事件不匹配导致值无法更新。
2. 数据绑定错误：父组件中v-model="item.model"绑定的是固定字符串（如"firstName"），字符串属于原始值，无法通过v-model完成双向更新，这也是输入内容不变化的核心原因之一。

修复步骤 #

1. 修改子组件（适配Vue3 v-model规范） #

将子组件的value prop替换为modelValue，同时把触发的事件改为update:modelValue：

<template>
    <div class="row p-1 g-3 d-md-flex justify-content-md-end">
        <div class="col-4 d-flex flex-row-reverse">
            <label for="inputPassword6" class="col-form-label">{{ profileDataItem }}</label>
        </div>
        <div class="col-8">
            <input 
                type="text" 
                class="form-control" 
                :value="modelValue"
                @input="$emit('update:modelValue', $event.target.value)"
            >
        </div>
    </div>
</template>

<script>
export default {
    name: 'RegisterField',
    props: {
        profileDataItem: {
            type: String,
            required: true
        },
        modelValue: {
            required: true
        },
    }
}
</script>

2. 修正父组件的数据结构与绑定逻辑 #

把profileDataItems中的model字段改为空字符串（用于存储用户输入值），而非字段名称：

<template>
    <div class="form-register p-3 m-auto">
        <form class="login-form p-3 border m-auto">
            <h4 class="text-center p-2">Register yourself</h4>
            <RegisterField
                v-for="(item, index) in profileDataItems" 
                :key="index"
                :profileDataItem="profileItems[index]"
                v-model="item.model"
            >
            </RegisterField>
        </form>
    </div>
</template>

<script>
import RegisterField from './RegisterField.vue'
import ButtonSubmit from '../ButtonSubmit.vue'
export default {
    name: 'RegisterForm',
    components: {
        RegisterField,
        ButtonSubmit
    },
    data () {
        return {
            profileItems: ['First Name', 'Last Name', 'Email', 'Password', 'Confirm Password'],
            profileDataItems: [
                { model: "" },
                { model: "" },
                { model: "" },
                { model: "" },
                { model: "" },                
            ],
            payloadProfileData: [],
        }
    },
}
</script>

3. 可选：跨Vue版本兼容方案 #

如果需要组件同时在Vue2和Vue3中运行，可以给子组件添加兼容配置：

export default {
    name: 'RegisterField',
    // Vue2 v-model兼容配置
    model: {
        prop: 'value',
        event: 'input'
    },
    props: {
        profileDataItem: {
            type: String,
            required: true
        },
        value: {
            required: false
        },
        modelValue: {
            required: false
        },
    },
    methods: {
        handleInput(val) {
            // 同时触发两个事件适配不同版本
            this.$emit('input', val)
            this.$emit('update:modelValue', val)
        }
    }
}

模板中对应修改：

<input 
    type="text" 
    class="form-control" 
    :value="value || modelValue"
    @input="handleInput($event.target.value)"
>

验证修复 #

修改完成后，控制台的Missing required prop: "value"警告会消失，输入框内容会同步更新到父组件的profileDataItems数组中，可通过打印this.profileDataItems查看用户输入的具体值。

内容的提问来源于stack exchange，提问作者João Denari