0

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.

2
  • 2
    Isn't computed(() => !donationInput.value?.inputValue) enough? Not sure if the Pug part is correct tho but that's quite easy to double-check I think. Commented Feb 1 at 21:14
  • The callback of isDisabled computer does not actually return a value, it will always be undefined. Commented Feb 20 at 8:19

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.