Dynamic inclusion of ToolBarItems using v-if...?

[Matthew]

Hello,

In the following snippet, if variable changes subsequent to the ToolBar being rendered, the ToolBarItem doesn't dynamically appear/disappear.  Seems like it's disconnected from state.  

<ToolBar>
	<ToolBarItem type="button" text="Do Something" id="button-one" v-if="variable"></ToolBarItem>
</ToolBar>

Have been able to work around this by dynamically including classes on a parent DOM element, and then, using CSS, either show or hide the element depending on the presence of the class.  However this doesn't feel right and breaks from Vue convention

<div :class="{ 'special-class' : variable }">
    <ToolBar>
	<ToolBarItem type="button" text="Do Something" id="button-one"></ToolBarItem>
    </ToolBar>
</div>

<style>
    #button-one {
        display:none;
    }
    .special-class #button-one {
        display:inline-flex;
    }
</style>

 

Is there something I am missing?  Perhaps another way to approach, or maybe conditional support via v-if is coming soon for Vue ToolBarItem?

 

Thanks!

[Petar]

Hello Matthew,

The Toolbar component is a Wrapper component that uses Kendo UI for jQuery under the hood. The reported behavior is expected as in the Kendo UI for jQuery Toolbar, to show/hide button inside the component, you have to use the hide and show methods.

Here is a StackBlitz example demonstrating the usage of the mentioned methods. 

Currently, the Kendo UI for Vue suite doesn't have a Native Toolbar component. Once it is implemented, the approach with the v-if directive will works as described by you. I can't say exactly when we will release the Native Toolbar. It isn't in our plans for the next release cycle. If you want, you can submit a feature request about a Native Toolbar in our Feedback portal. The more votes such a request collects, the chance for its sooner implementation is bigger.

I hope the above information answers your question. Let me know if you need additional assistance with the current thread.

Regards,
Petar
Progress Telerik

[Matthew]

Thank you Petar.  Appreciate the explanation and help.

[Petar]

You are welcome, Matthew!