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.
computed(() => !donationInput.value?.inputValue)enough? Not sure if the Pug part is correct tho but that's quite easy to double-check I think.