组件中的 v-model不监听事件请求

Question

我需要使用v-for创建一个动态v模型。我有一个将在父组件中使用的子组件。

我会把完整的代码和收到的警告。

这是有趣的，因为我在其他项目(NUXT)中使用相同的方法，它工作得很好。这个项目(vuejs)有相同的代码，但它不是。

在我看来，它似乎没有听"事件"，因此v模型不能很好地工作。v-model值不会根据输入空间的变化而更新。

这是子组件

<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="value"
@input="$emit('input', $event.target.value)"
>
</div>
</div>
</template>
<script>
export default {
name: 'RegisterField',
props: {
profileDataItem: {
type: String,
required: true
},
value: {
required: true
},
}
}
</script>

这是父组件

<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: "firstName" },
{ model: "lastName" },
{ model: "email" },
{ model: "password" },
{ model: "confirmPassword" },                
],
payloadProfileData: [],
}
},
}
</script>

控制台警告

[Vue warn]: Missing required prop: "value" 
at <RegisterField key=4 profileDataItem="Confirm Password" modelValue="confirmPassword"  ... > 
at <RegisterForm> 
at <SigninPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
at <RouterView> 
at <App>

Answer 1

将valueprop更改为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('input', $event.target.value)"
/>
</div>
</div>
</template>
<script>
export default {
name: 'RegisterField',
props: {
profileDataItem: {
type: String,
required: true,
},
modelValue: {
required: true,
},
},
};
</script>