How to dynamically generate nodes in the NavigationBar component

[JenkeNgParticipant]

<template>
<JqxSplitter
:width=”‘100%'”
:height=”‘93.7%'”
:panels=”[{ size: 200 }]”>
<div class=”splitter-panel”>
<JqxNavigationBar
class=”jqx-hideborder”
:expandMode=”‘multiple'”
:theme=”theme”
>
<div>
<div style=”margin-top: 2px;”>
<div style=’float: left;margin-left:5px;height:30px;’>

</div>
<div style=”margin-left:8px;margin-top:5px; float: left;”>
products
</div>
</div>
</div>
<div>

• Contacts
• Mails
• Notes

</div>
…

</JqxNavigationBar>
</div>
<div class=”splitter-panel”>
<JqxTabs
:width=”tabs.width”
:height=”tabs.height”
:theme=”theme”
:position=”tabs.position”
:animationType=”tabs.animationType”>

<li style=”margin-left: 10px;”>home

<div>
<WelcomPage
:width=”‘100%'”
:height=”‘100%'”
></WelcomPage>
</div>
</JqxTabs>
</div>
</JqxSplitter>
</template>

The demo shows a fixed template, but in actual business,the scale may be very large , and these nodes should be dynamically generated, how should I do

[MartinParticipant]

Hello JenkeNg,

The jqxNavigationBar has add method that you could use for generating new nodes.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[JenkeNgParticipant]

this.$refs.myNavigationBar.add(

<div>
                    <div style="margin-top: 2px;">
                        <div style='float: left;margin-left:5px;height:30px;'>
                            
                        </div>
                        <div style="margin-left:8px;margin-top:5px; float: left;">xxx</div>
                    </div>
                </div>`,
                `<div>
                    <ul class="submenu">
                        
111
                        
222
                        
333
                    
                </div>`
                );

The picture address here will not be valid
src="../assets/icon/product.png"

I tried this method and it works. But there is another problem. The image will not be displayed for the nodes added by this method. The image address of the fixed template seems to be compiled, but the image address of the added node is not compiled, how can I change it.

[JenkeNgParticipant]

And how do I bind the click event to the<li> in the <ul></ul></li>

[MartinParticipant]

Hello JenkeNg,

Please, note that the add method have 2 arguments: header and content.
You can check the following Example for adding items with images in the jqxNavigationBar for Vue.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[JenkeNgParticipant]

I think the way the JqxNavigationBar component is generated is very unreasonable.
Its members are a group of two, which violates the constraint that the vue template has only one root,
so that I can only write all the members as non-dynamic when using this component. Instead of using v-for to generate dynamically.
I think two members (div of the parent menu and ul of the submenu) need a div to encapsulate them,
but the component does not support this
At present, I cannot achieve satisfactory results in the add method of JqxNavigationBar, some events bound to ul menu
Because the mainstream way is v-for to generate items

[MartinParticipant]

Hello JenkeNg,

Thank you for the feedback!

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[JenkeNgParticipant]

When will the improvement of “merging nodes into one root” be realized?

[adminKeymaster]

Hello JenkeNg,

We do not think that the navigation bar violates any rules. If you wish you can put it inside a DIV tag and it is absolutely OK.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts