我有一个父组件,它是一个表单组件,具有多个包含输入字段的子组件
<template>
<div class="form">
<generalData v-model="input" />
<textAreas v-model="input"/>
<button class="btn" @click="Submit()">Submit</button>
<div/>
</template>
<script>
export default {
data(){
return {
input: {
name: '',
age: '',
address: ''
bio: ''
}
}
},
methods: {
Submit(){
console.log('Submitting...');
console.log(this.input);
}
}
}
</script>
并且子组件包含文本字段
<template>
<div class="generalData">
<input name="name" type="text" v-bind:value="input.name" v-on:input="updateInput($event.target.value)">
<input name="age" type="text" v-bind:value="input.age" v-on:input="updateInput($event.target.value)">
<div/>
</template>
<script>
export default {
props: ['input'],
data(){
return {
}
},
methods: {
updateInput(value){
this.$emit('input', value);
}
}
}
</script>
与其他子组件相同,但值未更新,因此我无法提交
答案 0 :(得分:0)
您必须使用在组件内部定义的prop。您为道具输入命名,然后:
<template>
<div class="form">
<generalData :input="input" />
<textAreas :input="input" />
<button class="btn" @click="submit">Submit</button>
<div/>
</template>
<script>
export default {
data(){
return {
input: {
name: '',
age: '',
address: ''
bio: ''
}
}
},
methods: {
submit(){
console.log('Submitting...');
console.log(this.input);
}
}
}
</script>
答案 1 :(得分:0)
尝试以下代码:
<template>
<div class="generalData">
<input type="text" v-model="person.name" @change="handleChange" @input="handleInput">
<input type="text" v-model="person.age" @change="handleChange" @input="handleInput">
<input type="text" v-model="person.address" @change="handleChange" @input="handleInput">
<input type="text" v-model="person.bio" @change="handleChange" @input="handleInput">
<div/>
</template>
<script>
export default {
props: ['value'],
data () {
return {
person: {
name: '',
age: '',
address: ''
bio: ''
}
}
},
methods: {
handleChange () {
return this.$emit('change', this.person)
},
handleInput () {
return this.$emit('input', this.person)
},
setCurrentValue (person) {
this.person = person
}
},
watch: {
value (val) {
if (!val) return
this.setCurrentValue(val)
}
}
}
</script>
答案 2 :(得分:0)
接近此的另一种方式是使一个输入组件,然后遍历用户对象传递的属性和具有v-model
直接绑定到值的输入。如果您的用户对象是在根视图实例可以使用访问数据this.$root.whatEver