CODEWITHSUNDEEP
formsvuejs3refcomputed-propertiesvue-reactivity
Nick Bewley
Nick Bewley

Reputation: 9289

Disabling Form Submit Button Vue3

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.

Upvotes: 0

Views: 8

Answers (0)

Related Questions