Nested Slots Vue Js

I have to create multiple tabs having dynamic content. There will be one parent component to handle switching between tabs and master data for tabs. This parent-child component system is to be used as a generic component which accepts a list about tabs and renders tabs as per the list. I can use this parent component in my root component where tabs list information is available and also the. The mechanism of slots in Vue.js makes it easier to create universal, reusable components. Slots are very powerful and at first may seem hard to use, especially the more advanced variants.

In this tutorial, we will learn about how to use the slots in vue.js with the help of examples.

What are Slots?

Slots helps us to pass the data between opening and closing component tags.

In vue.js props are used to pass the data to its child components, but it is hard to pass when we have a complex code. In such cases slots can be used.

Let’s create a new component called Post by adding the <slot> element.

Now, if we pass any content between the Post component opening and closing tags that are rendered in the place of <slot></slot> element.

Output:

Named Slots

Sometimes, we need to pass the data to a specific places in such cases named slots can be used.

The named slots can be created by adding a name attribute to the <slot> element.

To pass the content to the named slots we need to use v-slot directive on template providing slot name as v-slot argument.

Fallback data

In some cases, we can use fallback data (aka default) when data is not passed to a slot.

For example:

In the above component, we have added a Submit text inside a slot element.

Now, If we use a my-button component without passing any data we can seethe fallback data Submit text is rendered inside the button.

Output of rendered html:

But, if we pass data to the my-button component fallback data is replaced.

Output of rendered html:

vue-treeselect is a multi-select component with nested options support for Vue.js.

• Single & multiple select with nested options support
• Fuzzy matching
• Async searching
• Delayed loading (load data of deep level options only when needed)
• Keyboard support (navigate using Arrow Up & Arrow Down keys, select option using Enter key, etc.)
• Rich options & highly customizable
• Supports a wide range of browsers

Requires Vue 2.2+

It's recommended to install vue-treeselect via npm, and build your app using a bundler like webpack.

This example shows how to integrate vue-treeselect with your Vue SFCs.

If you just don't want to use webpack or any other bundlers, you can simply include the standalone UMD build in your page. In this way, make sure Vue as a dependency is included before vue-treeselect.

Basic Features

This example demonstrates the most commonly-used features of vue-treeselect. Try the fuzzy matching functionality by typing a few letters.

The first thing you need to learn is how to define options. There are two types of options: a. folder options that are foldable & may have children options, and b. normal options that aren't & don't. Here, I'd like to borrow the basic concepts from Computer Science and call the former as branch nodes & the latter as leaf nodes. These two kinds of nodes together compose the tree.

Defining leaf nodes is quite simple:

Defining branch nodes only needs an extra children property:

Then you can pass an array of these nodes as the options prop. Note that, even if you assign an empty array to the children property, it's still considered to be a branch node. This is likely different from what you've learnt from Computer Science, in which a node with no children is commonly known as a leaf node.

For information on all available properties in a node object, see below.

More Features

This demonstrates more features.

Delayed Loading

If you have a large number of deeply nested options, you might want to load options only of the most top levels on initial load, and load the rest only when needed. You can achieve that by following these steps:

1. Declare an unloaded branch node by setting children: null
2. Add loadOptions prop
3. Whenever an unloaded branch node gets expanded, loadOptions({ action, parentNode, callback, instanceId }) will be called, then you can perform the job requesting data from a remote server

It's also possible to have root level options to be delayed loaded. If no options have been initially registered (options: null), vue-treeselect will attempt to load root options by calling loadOptions({ action, callback, instanceId }) after the component is mounted. In this example I have disabled the auto loading feature by setting autoLoadRootOptions: false, and the root options will be loaded when the menu is opened.

Nested Slots Vue Js Tool

Async Searching

vue-treeselect supports dynamically loading & changing the entire options list as the user types. By default, vue-treeselect will cache the result of each AJAX request, thus the user could wait less.

Flat Mode & Sort Values

In all previous examples, we used the default non-flat mode of vue-treeselect, which means:

1. Whenever a branch node gets checked, all its children will be checked too
2. Whenever a branch node has all children checked, the branch node itself will be checked too

Sometimes we don't need that mechanism, and want branch nodes & leaf nodes don't affect each other. In this case, flat mode should be used, as demonstrated in the following.

If you want to control the order in which selected options to be displayed, use the sortValueBy prop. This prop has three options:

• 'ORDER_SELECTED' (default) - Order selected
• 'LEVEL' - Level of option: C 🡒 BB 🡒 AAA
• 'INDEX' - Index of option: AAA 🡒 BB 🡒 C

Prevent Value Combining

For non-flat & multi-select mode, if a branch node and its all descendants are checked, vue-treeselect will combine them into a single item in the value array, as demonstrated in the following example. By using valueConsistsOf prop you can change that behavior. This prop has four options:

• 'ALL' - Any node that is checked will be included in the value array
• 'BRANCH_PRIORITY' (default) - If a branch node is checked, all its descendants will be excluded in the value array
• 'LEAF_PRIORITY' - If a branch node is checked, this node itself and its branch descendants will be excluded from the value array but its leaf descendants will be included
• 'ALL_WITH_INDETERMINATE' - Any node that is checked will be included in the value array, plus indeterminate nodes

Disable Branch Nodes

Set disableBranchNodes: true to make branch nodes uncheckable and treat them as collapsible folders only. You may also want to show a count next to the label of each branch node by setting showCount: true.

Flatten Search Results

Set flattenSearchResults: true to flatten the tree when searching. With this option set to true, only the results that match will be shown. With this set to false (default), its ancestors will also be displayed, even if they would not individually be included in the results.

Disable Item Selection

You can disable item selection by setting isDisabled: true on any leaf node or branch node. For non-flat mode, setting on a branch node will disable all its descendants as well.

Nested Search

Sometimes we need the possibility to search options within a specific branch. For example your branches are different restaurants and the leafs are the foods they order. To search for the salad order of 'McDonals' restaurant, just search for 'mc salad'. You can also try searching 'salad' to feel the difference.

Concretely speaking, your search query gets split on spaces. If each splitted string is found within the path to the node, then we have a match.

Fuzzy matching functionality is disabled for this mode to avoid mismatching.

Customize Key Names

If your data of options is loaded via AJAX and have a different data structure than what vue-treeselect asks, e.g. your data has name property but vue-treeselect needs label, you may want to customize the key names. In this case, you can provide a function prop called normalizer which will be passed every node in the tree during data initialization. Use this function to create and return the transformed object.

Customize Option Label

You can customize the label of each option. vue-treeselect utilizes Vue's scoped slot feature and provides some props you should use in your customized template:

• node - a normalized node object (note that, this is differnt from what you return from normalizer() prop)
• count & shouldShowCount - the count number and a boolean indicates whether the count should be displayed
• labelClassName & countClassName - CSS classnames for making the style correct

Customize Value Label

You can customize the label of value item (each item in case of multi-select). vue-treeselect utilizes Vue's scoped slot feature and provides some props you should use in your customized template:

Nested Slots Vue Js Login

• node - a normalized node object (note that, this is differnt from what you return from normalizer() prop)

Nested Slots Vue Js Tutorial

Vuex Support

In all previous examples, we used v-model to sync value between application state and vue-treeselect, a.k.a two-way data binding. If you are using Vuex, we could make use of :value and @input, since v-model is just a syntax sugar for them in Vue 2.

Nested Slots Vue Js 2.2

Concretely speaking, we can bind getter to :value to make vue-treeselect reflect any changes in your Vuex state, and bind action or mutation to @input to update your Vuex state whenever the value changes.

Node

Props

Events

Slots