vuejs3 - Disabling Form Submit Button Vue3 - Stack Overflow

admin2025-04-16  2

I would like to disable the submit button in my Vue application if the user hasn't entered data in the donationInput input field. I'm sure I'm missing something basic, thanks for your help identifying it:

script:

const isDisabled = computed(() => {
  if (!donationInput.value.inputValue) {
    true
  } else {
    false
  }
})

template (using pug):

    InputField(label="Donation Amount", ref="donationInput", number=true)
    button.submit-button(ref="submitBtn" type="button", @click="pay", :disabled="isDisabled") Make Donation

InputField.vue:

const props = defineProps({
  label: String, 
  number: Boolean
})

// expose the input value to parent
import { ref, defineExpose } from 'vue'
const inputValue = ref('')
defineExpose({
  inputValue
})

input(v-else v-model="inputValue", type="text", ref="input", :name="camelCase" :id="id" :placeholder="placeholder")

How can I disable the submitBtn until the user adds a value to donationInput? Any ways to simplify the code would be appreciated, as well.

转载请注明原文地址:http://anycun.com/QandA/1744816410a88014.html