Vuejs Dynamic Slots
How to declare a list of slots with dynamic names and dynamic components in a VueJS template? Ask Question Asked 1 year, 4 months ago. This page assumes you’ve already read the Components Basics.Read that first if you are new to components. In 2.6.0, we introduced a new unified syntax (the v-slot directive) for named and scoped slots. To pass props dynamically, you can add the v-bind directive to your dynamic component and pass an object containing your prop names and values: So your dynamic component would look like this: And in your Vue instance, currentProperties can change based on the current.
You’re browsing the documentation for v2.x and earlier. For v3.x, click here.
Di contoh ini, kita memilih untuk memberi nama objek yang berisi semua slot props slotProps kami, tetapi Anda bisa menggunakan nama apa pun yang Anda suka. Sintaks yang Disingkat untuk Slot Default yang Sendirian. Pada kasus di atas, ketika slot default saja yang hanya disediakan konten, tag komponen dapat digunakan sebagai templat slot. Beautiful slot syntax. Since Vue 2.6, there is a shorthand for slot names, just like there is for events e.g @click instead of v-on:click`. If you have a component which has a slot called row, which has a slot-prop called item, you can now pass a piece of template to it and access the item prop this way.
A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when v-bind is used with class and style. In addition to strings, the expressions can also evaluate to objects or arrays.
Binding HTML Classes
Object Syntax
We can pass an object to v-bind:class to dynamically toggle classes:
The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.
You can have multiple classes toggled by having more fields in the object. In addition, the v-bind:class directive can also co-exist with the plain class attribute. So given the following template:
And the following data:
It will render:
Vuejs Dynamic Slots Definition
When isActive or hasError changes, the class list will be updated accordingly. For example, if hasError becomes true, the class list will become 'static active text-danger'.
The bound object doesn’t have to be inline:
This will render the same result. We can also bind to a computed property that returns an object. This is a common and powerful pattern:
Array Syntax
We can pass an array to v-bind:class to apply a list of classes:
Which will render:
If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:
This will always apply errorClass, but will only apply activeClass when isActive is truthy.
However, this can be a bit verbose if you have multiple conditional classes. That’s why it’s also possible to use the object syntax inside array syntax:
Vuejs Dynamic Slot Name
With Components
This section assumes knowledge of Vue Components. Feel free to skip it and come back later.
When you use the class attribute on a custom component, those classes will be added to the component’s root element. Existing classes on this element will not be overwritten.
For example, if you declare this component:
Then add some classes when using it:
The rendered HTML will be:
The same is true for class bindings:
When isActive is truthy, the rendered HTML will be:
Binding Inline Styles
Object Syntax
The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:
It is often a good idea to bind to a style object directly so that the template is cleaner:
Again, the object syntax is often used in conjunction with computed properties that return objects.
Array Syntax
Vuejs Dynamic Slots Games
The array syntax for v-bind:style allows you to apply multiple style objects to the same element:
Auto-prefixing
When you use a CSS property that requires vendor prefixes in v-bind:style, for example transform, Vue will automatically detect and add appropriate prefixes to the applied styles.
Multiple Values
2.3.0+
Vuejs Dynamic Slots App
Starting in 2.3.0+ you can provide an array of multiple (prefixed) values to a style property, for example:
This will only render the last value in the array which the browser supports. In this example, it will render display: flex for browsers that support the unprefixed version of flexbox.