Vue表单提交时禁用输入的可复用组件/混入实现方案问询

Great question! Dealing with repetitive disable/enable logic across form components is such a common pain point—no one wants to write that isDisabled boilerplate over and over. The good news is you don’t have to build a rigid universal form component (which you’re right, would fall apart with complex, varied forms). Here are two clean, flexible solutions tailored to Vue versions:

Composables are perfect for this scenario because they let you extract reusable logic without forcing a one-size-fits-all component structure. You can create a composable that handles the loading state and wraps your submit function automatically, so you never have to manually toggle isDisabled again.

First, create the composable:

// composables/useFormSubmit.js
import { ref } from 'vue'

export function useFormSubmit() {
  const isDisabled = ref(false)

  const wrapSubmit = async (submitHandler) => {
    isDisabled.value = true
    try {
      // Run the component's custom submit logic
      await submitHandler()
    } catch (error) {
      // Re-throw the error so the component can handle it (e.g., show an alert)
      throw error
    } finally {
      // Reset disabled state no matter success or failure
      isDisabled.value = false
    }
  }

  return {
    isDisabled,
    wrapSubmit
  }
}

Then use it in your form component:

<template>
  <form @submit.prevent="handleSubmit">
    <fieldset :disabled="isDisabled">
      <div>
        <label>Name</label>
        <input v-model="u.name">
      </div>
      <div>
        <label>Email</label>
        <input type="email" v-model="u.email">
      </div>
    </fieldset>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import { useFormSubmit } from '@/composables/useFormSubmit'
import api from '@/api'

const u = ref({
  name: '',
  email: ''
})

// Pull in the reusable logic
const { isDisabled, wrapSubmit } = useFormSubmit()

// Wrap your custom submit logic with the composable
const handleSubmit = wrapSubmit(async () => {
  const response = await api.post('/users/create', { 
    name: u.value.name, 
    email: u.value.email 
  })
  // Do whatever you need with the response here
})
</script>

This keeps your component focused on its unique form logic while offloading the repetitive disable state management to the composable. It works with any form structure—even those with conditional rendering or custom fields.

If you’re still working with Vue 2, a mixin is a solid alternative to extract the repeated logic.

First, create the mixin:

// mixins/formSubmitMixin.js
export default {
  data() {
    return {
      isDisabled: false
    }
  },
  methods: {
    wrapSubmit(submitHandler) {
      this.isDisabled = true
      // Run the component's submit logic and reset disabled state when done
      return submitHandler()
        .finally(() => {
          this.isDisabled = false
        })
    }
  }
}

Then use it in your component:

<template>
  <form @submit.prevent="handleSubmit">
    <fieldset :disabled="isDisabled">
      <div>
        <label>Name</label>
        <input v-model="u.name">
      </div>
      <div>
        <label>Email</label>
        <input type="email" v-model="u.email">
      </div>
    </fieldset>
  </form>
</template>

<script>
import formSubmitMixin from '@/mixins/formSubmitMixin'
import api from '@/api'

export default {
  mixins: [formSubmitMixin],
  data() {
    return {
      u: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      // Wrap your custom submit logic with the mixin's method
      this.wrapSubmit(() => {
        return api.post('/users/create', { 
          name: this.u.name, 
          email: this.u.email 
        })
        .then(response => {
          // Handle response
        })
        .catch(error => {
          alert(error)
        })
      })
    }
  }
}
</script>

Both solutions eliminate the need to manually set isDisabled in every success and catch block, and they work seamlessly with any form structure you throw at them—no rigid universal component required.

内容的提问来源于stack exchange，提问作者nnnmmm