css styling for child component in vue js

Question

I'm using reusable code for my contact form, and there are two required fields. In the parent component, i use label as the name of the label tag. For an example, the label full name must have 'Full Name ' and the '' should be in blue color. I don't have any idea on how to do that. Appreciate if someone could help me.

InputField.vue

<template>
  <label for="name">
        {{ label }}
        <span style="color:#0077FF">&nbsp;*</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>

@NikleshRaut it just a simple label that you see on any contact form from any websites. This is the design, but i dont know how to change the star symbol to be blue(that means it is required) imgur.com/a/8Fp0aMX — Amirul Amin
– Amirul Amin, Commented Sep 26, 2019 at 6:06

Phil · Accepted Answer · 2019-09-26 06:11:52Z

2

Probably easiest to do this in CSS.

Add a required prop to your component (if you didn't have one already) and use it to add a CSS class to the label

props: {
  label: String,
  required: Boolean,
  placeholder: {
    type: String,
    required: false
  }
}

<label :class="{ required }">{{ label }}</label>

<style scoped>
label.required:after {
  content: ' *';
  color: #0077FF;
}
</style>

Then you can just supply the label without decoration and the CSS will add it automatically for required fields.

<InputField required label="Full Name" .../>

edited Sep 26, 2019 at 6:11

answered Sep 26, 2019 at 5:57

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css styling for child component in vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related