如何动态要求输入？答案

【问题标题】：How to make input required dynamically?如何动态要求输入？
【发布时间】：2022-08-16 21:44:44
【问题描述】：

我有一个看起来像这样的基本输入组件：

<template>
  <div c>
    <label :class=\"required ? \'required\' : \'\'\">{{ 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>

我希望如果传递了所需的布尔值，则在输入上设置了“require”值，即

<input ... require>

如何在输入上设置 require 选项？我不知道如何设置它，因为它不是典型的键/值形式。我也没有在https://vuejs.org/guide/essentials/forms.html#multiline-text 找到任何东西

标签： vue.js vuejs3

【解决方案1】：

只需将 required 属性绑定到 required 属性：

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

【讨论】：