お問い合わせフォームに再利用可能なコードを使用していますが、2つの必須フィールドがあります。親コンポーネントでは、labelタグの名前としてlabelを使用します。たとえば、ラベルのフルネームには「フルネーム」が必要であり、「」は青色である必要があります。どうすればいいのかわからない。誰かが私を助けてくれるかどうか感謝します。
InputField.vue
<template>
<label for="name">
{{ label }}
<span style="color:#0077FF"> *</span>
</label>
</template>
Contact.vue
<form id="contact-form" @submit.prevent="submitForm">
<InputField
v-model="fullName"
label="Full Name *"
placeholder="Your full name"
required
@handleChange="handleChangeName($event)"
/>
</form>
おそらくCSSでこれを行うのが最も簡単です。
requiredコンポーネントに小道具を追加し（まだ持っていない場合）、それを使用してCSSクラスをラベルに追加します
props: {
label: String,
required: Boolean,
placeholder: {
type: String,
required: false
}
}
<label :class="{ required }">{{ label }}</label>
<style scoped>
label.required:after {
content: ' *';
color: #0077FF;
}
</style>
次に、装飾なしでラベルを指定するだけで、CSSがrequiredフィールドに自動的に追加します。
<InputField required label="Full Name" .../>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加