Question

我有一个父子组件。我在这里面临的问题是，当我第一次单击子组件中的提交按钮时，我作为道具从父级发送到子级的验证字段没有更新。例如，当我在子组件上提交表单时，它使用父组件中的 checkValidation 方法检查表单验证。假设表单验证在提交时为真，但在控制台中 this.validation 在子组件中仍然显示为 false，当我再次单击提交时，然后在控制台中 this.validation 返回 true。因此 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>

Answer 1

这应该可以解决问题

//child component
  submit() {
  this.$emit('checkValidation');
  this.$nextTick(()=>{console.log(this.validation)})
},

有关更多详细信息，我推荐以下内容 article documention

这篇文章应该能解答你的大部分疑惑?

Answer 2

如果你的子组件有表单，为什么没有对子组件进行验证。然后，您可以在表单有效时发出“已保存”事件，在父级中选择该事件并执行您想要的操作，并且您知道子级此时有效？删除所有这些参考点。

props 值未将更新的值从 vue 中的父组件发送到子组件

2 个答案: