web123456

Traversing forms and form validation with element-plus el-form in vue3, dynamically getting refs

  • setup() {
  • let rules = reactive({
  • thisWeek: [
  • {
  • required: true,
  • message: 'Please fill in this week's tasks',
  • trigger: 'blur',
  • },
  • ],
  • nextWeek: [
  • {
  • required: true,
  • message: 'Please fill in next week's plan',
  • trigger: 'blur',
  • },
  • ],
  • workingHours: [
  • {
  • required: true,
  • message: 'Please fill in the hours worked',
  • trigger: 'blur',
  • },
  • ],
  • })
  • const userWorkFormRefs = ref([])
  • // My form submission method
  • function onSubmit(v: any) {
  • console.log('userWorkFormRefs', userWorkFormRefs)
  • let formRef = null as any
  • userWorkFormRefs.value?.forEach((form: any) => {
  • if (form.model.id === v.id) {
  • formRef = form
  • }
  • })
  • // Form validation
  • if (!formRef) {
  • return
  • }
  • formRef.validate((valid: any) => {
  • if (valid) {
  • }
  • })
  • }
  • // Make sure to reset the ref before each update.
  • onBeforeUpdate(() => {
  • userWorkFormRefs.value = []
  • })
  • return {
  • rules,
  • onSubmit,
  • userWorkFormRefs,
  • }
  • },