gpt4 book ai didi

javascript - Vuejs 在子组件中提交带有输入的表单

转载 作者:搜寻专家 更新时间:2023-10-30 22:50:04 24 4
gpt4 key购买 nike

我有一个父组件,它是一个表单组件,它有多个包含输入字段的子组件

<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>

其他子组件也一样,但值没有得到更新,我无法提交它们

最佳答案

试试这段代码:

<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>

关于javascript - Vuejs 在子组件中提交带有输入的表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54495933/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com