如何等待 prop 更改作为函数的一部分？

Question

我有一个

Form.vue

组件，在其他父组件中使用它来将用户的数据提交到服务器。

Form.vue

有一个 prop 来指示其父组件是否通过了自己的验证检查（父组件可以是从 HR 记录到视频上传的任何内容）。事情是这样的：

表单.vue

export default {
  name: "ComponentForm",
  props: {
    PassedParentValidation: {
      type: Boolean,
      default: true
    }
  }, 
  emits: ['Publishing'],

setup(props, context) {
...
async function sendForm() {
   context.emit('Publishing') // Triggers parent to perform its own validation

   // not waiting for props to update here
   if(!props.PassedParentValidation){
        const Err = new Error()
        Err.message = 'Failed parent validation'
        Err.code = 400;
        throw Err;
        }  
   else {
   //Send the form
   }
  }
}

父组件将使用

Form.vue

子组件，有点像这样：

Parent.vue

<template>
  <h1>Your HR record</h1>
  <Component-Form :PassedParentValidation="PassedValidation" @Publishing="validateRecord" />
</template>

<script>
import ComponentForm from "../components/Form.vue";

export default {
  name: 'ViewParent',
  "Component-Form": ComponentForm,
  
  setup() {
  const PassedValidation = ref(null);
   
  async function validateRecord(){
  
   if (SomeReallyComplexConditionThatCouldTake10SecondsToComplete) {
    PassedValidation.value = true; 
   } else if (!SomeReallyComplexConditionThatCouldTake10SecondsToComplete) {
    PassedValidation.value = false;
   }

     return {
       validateRecord,
       PassedValidation
    }
  }
</script>

以下是我期望发生的步骤：

1. 用户提交在

   sendForm()

    中运行 

   Form.vue
的表单

2. sendForm()

   告诉

   Parent.vue

   它正在发布

3. Parent.vue

   使用

   validateRecord()

进行验证检查
4. 如果

   validateRecord

   验证失败，则

   props.PassedParentValidation

   应该为 false 并在

   Form.vue

中抛出错误
5. 如果

   validateRecord

   通过验证，则将

   PassedValidation

   设置为 true，这应该将

   prop

   中的

   Form.vue

   更新为

   true

   ，即

   props.PassedParentValidation === true

   并且不会抛出错误

发生的情况是，在运行剩余的

Form.vue

代码之前，

prop.PassedParentValidation

并未“等待”

sendForm()

进行更新。

因此，如果

props.PassedParentValidation === false

，它会抛出错误。但是，如果用户再次提交表单并在

PassedValidation === true

中提交

Parent.vue

，则该表单不会及时传递到

Form.vue

。

也就是说，

Form.vue

不会等待 prop 更改值，因此即使父级的

PassedValidation === true

在

Form.vue

中仍然保持 false 并抛出错误。

我该如何克服这个问题？

Answer 1

您可以使用手表来监视 PassedParentValidation 属性的更改并相应地更新内部状态。

<template>
  <div>
    <!-- Your form here -->
    <button @click="sendForm">Submit</button>
  </div>
</template>

<script>
export default {
  name: "ComponentForm",
  props: {
    PassedParentValidation: {
      type: Boolean,
      default: true
    }
  },
  emits: ['Publishing'],

  setup(props, { emit }) {
    const isParentValid = ref(props.PassedParentValidation); // Internal state to react to prop changes

    watch(
      () => props.PassedParentValidation,
      (newVal) => {
        isParentValid.value = newVal; // Update internal state when prop changes
      }
    );

    async function sendForm() {
      emit('Publishing'); // Notify parent to perform validation

      // Wait for the parent's validation process to complete
      await nextTick();

      // Check the updated state after validation
      if (!isParentValid.value) {
        const Err = new Error();
        Err.message = 'Failed parent validation';
        Err.code = 400;
        throw Err;
      } else {
        // Send the form if validation passes
        console.log("Form submitted successfully!");
      }
    }

    return {
      sendForm,
      isParentValid
    };
  }
};
</script>