How to make input required dynamically?-CodePudding

I have a basic input component that looks like this:

<template>
  <div c>
    <label :>{{ label }}</label>
      <div >
      <input :value="modelValue" v-on:input="updateValue($event.target.value)"
             type="text"
      />
      </div>
      <p v-if="note" v-text="note"></p>
    </div>
</template>

<script setup>
defineProps({
  label: String,
  modelValue: String,
  required: { type: Boolean, default: false }
})

const emit = defineEmits(['update:modelValue'])

function updateValue(value){
  emit('update:modelValue', value);
}
</script>

I want that if the boolean required is passed that the "require" value is set on the input, i.e.

<input ... require>

How can I set that require option on the input? I don't know how to set it, because its not of the typical key/value form. I also didn't find anythign at https://vuejs.org/guide/essentials/forms.html#multiline-text

CodePudding user response：

Just bind the required attribute to the required prop :

 <input :value="modelValue" v-on:input="updateValue($event.target.value)"
             type="text"
             :required="required"
      />