vue表单动态监听必填项

可以监听表单项的变化，动态判断必填项是否已经填写。以下是一个示例代码：

<template>
  <div>
    <form>
      <input type="text" v-model="name" @input="checkRequired">
      <input type="text" v-model="email" @input="checkRequired">
      <input type="text" v-model="phone">
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      phone: '',
      requiredFields: ['name', 'email']
    }
  },
  methods: {
    checkRequired() {
      const filledFields = Object.keys(this.$data).filter(key => {
        return this.$data[key] !== '' && this.requiredFields.includes(key);
      });
      console.log('Filled Fields:', filledFields);
      if (filledFields.length === this.requiredFields.length) {
        console.log('All required fields are filled');
        // Do something
      } else {
        console.log('Missing required fields:', this.requiredFields.filter(field => !filledFields.includes(field)));
      }
    }
  }
}
</script>

在上面的示例中，我们定义了一个 `requiredFields` 数组，用于存储必填项的字段名。在 `checkRequired` 方法中，我们通过过滤所有非空字段，并检查其中是否包含所有必填项来判断是否已经填写了所有必填项。如果是，我们可以执行一些操作。如果不是，我们可以警告用户缺少必填项。在输入框的 `@input` 事件中，我们调用 `checkRequired` 方法，以便在用户输入时动态检查必填项。