[英]Logging the Props in child component gives the updated value whereas state itself defined in the parent still not gets updated
[英]props value not sending the updated value from parent to child component in vue
我有一个父子组件。 我在这里面临的问题是,当我第一次单击子组件中的提交按钮时,我作为道具从父级发送到子级的验证字段没有得到更新。 例如,当我在子组件上提交表单时,它会使用父组件中的 checkValidation 方法检查表单验证。 假设表单验证在提交时为真,但在控制台中 this.validation 在子组件中仍然显示为假,当我再次单击提交时,在控制台中 this.validation 返回真。 因此 this.validation 值在单击提交按钮时第二次更改。 请帮我解决这个问题
父组件
<template>
<UserDetails
ref="user_details"
:validation="validation"
@checkValidation="checkValidation"
/>
</template>
<script>
import UserDetails from 'views/my_account/users/edit.vue';
export default {
components: {
UserDetails,
},
data: function () {
return {
validation: false
}
},
methods: {
checkValidation() {
var valid = false;
var that = this;
valid = this.$refs["user_details"].$refs.userForm.validate()
this.validation = valid
},
}
};
</script>
子组件
<template>
<div>
<v-form :model='user' ref='userForm'>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right">
<v-text-field
label='User Name'
required
v-model='user.name'>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-btn @click.prevent='submit'>Save</v-btn>
</v-layout>
</v-form>
</div>
</template>
<script>
export default {
props: ['validation'],
data: function () {
return {
user: {
name: ''
}
};
},
methods: {
submit() {
this.$emit('checkValidation');
console.log(this.validation)
},
}
};
</script>
如果您的子组件有表单,为什么不对子组件进行验证。 然后,您可以在表单有效时发出“已保存”事件,在父级中获取该事件并执行您想要的操作,并且您知道此时子级有效? 删除所有这些参考点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.