Menu
If I pass a class name to a component how do I use the value of that prop as the class name?
<i v-if="icon" class="fa" :class="{ icon: icon }"></i>
called with <input-text icon="fa-search"></input-text>
382
Adding a dynamic class name is as simple as adding the prop :class="classname" to your component. Whatever classname evaluates to will be the class name that is added to your component. Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.
To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.
Vue does not take a copy when you pass objects via props. If you pass an object via a prop then both components will be seeing the same object. As it's the same object, any property changes made by the child will also impact the other parent.
Using props in VueAfter you have set up the props, you can then use it inside your component as though the data was defined inside the same component. This means you can set up method calls and easily access this.
Vue.js Prop Types To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.
This page assumes you've already read the Components Basics. Read that first if you are new to components. Vue components require explicit props declaration so that Vue knows what external props passed to the component should be treated as fallthrough attributes (which will be discussed in its dedicated section ).
If you do, Vue will warn you in the console. There are usually two cases where it’s tempting to mutate a prop: The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards. In this case, it’s best to define a local data property that uses the prop as its initial value:
Sometimes you pass a prop to a component, and you want to use that prop value as the class name. How to do that? Say you have a Car component. You want to add a class to its output based on a prop. So maybe the prop is called color, and you use it like this in other parts of the app:
You can use array notation:
<i v-if="icon" :class="['fa', icon]"></i>
Where icon is a name of your property.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
