Problems with NavigationBar and add method

[JenkeNgParticipant]

For the node added by the NavigationBar component through the add method,
the image address is not compiled,
and how to bind the event?

[HristoParticipant]

Hello JenkeNg,

Could you provide us with one simplified example that demonstrates your case?
I tested this example and it seems to work fine.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[JenkeNgParticipant]

Please note that the label of this question is: Vue.
The question I asked is related to the NavigationBar of the vue component.
After executing the add method,
the image address is not compiled and cannot be displayed,
and I don’t know how to bind the event to the child node.
I don’t know how to provide examples of vue components
Waiting for your reply, I have spent 3 days on this question

[HristoParticipant]

Hello JenkeNg,

I tested this example and it seems to work fine (below is “App.vue” file):

<template>
  <div style="width: 300px">
    <JqxButton @click="clickHandler($event)" :width="80">Add Item</JqxButton>
    <br>
    <br>
    <JqxNavigationBar ref="myNavigationBar"
      @collapsedItem="collapsedItem($event)"
      @expandedItem="expandedItem($event)"
      :expandedIndexes="[2, 3]"
      :expandMode="'multiple'"
      :width="300"
    >
      <div>
        <div style="margin-top: 2px">
          <div style="float: left">
            <img
              alt="Mail"
              src="https://www.jqwidgets.com/angular/images/mailIcon.png"
            />
          </div>
          <div style="margin-left: 4px; float: left">Mail</div>
        </div>
      </div>
      <div>
        <ul>
          <li><a href="#">Contacts</a></li>
          <li><a href="#">Mails</a></li>
          <li><a href="#">Notes</a></li>
        </ul>
      </div>
      <div>
        <div style="margin-top: 2px">
          <div style="float: left">
            <img
              alt="Mail"
              src="https://www.jqwidgets.com/angular/images/contactsIcon.png"
            />
          </div>
          <div style="margin-left: 4px; float: left">Contacts</div>
        </div>
      </div>
      <div>
        <ul>
          <li><a href="#">Business Cards</a></li>
          <li><a href="#">Address Cards</a></li>
          <li><a href="#">Detailed Address Cards</a></li>
          <li><a href="#">Phone List</a></li>
        </ul>
      </div>
      <div>
        <div style="margin-top: 2px">
          <div style="float: left">
            <img
              alt="Mail"
              src="https://www.jqwidgets.com/angular/images/tasksIcon.png"
            />
          </div>
          <div style="margin-left: 4px; float: left">Tasks</div>
        </div>
      </div>
      <div>
        <ul>
          <li><a href="#">Simple List</a></li>
          <li><a href="#">Detailed List</a></li>
          <li><a href="#">Active Tasks</a></li>
          <li><a href="#">Phone List</a></li>
        </ul>
      </div>
      <div>
        <div style="margin-top: 2px">
          <div style="float: left">
            <img
              alt="Mail"
              src="https://www.jqwidgets.com/angular/images/notesIcon.png"
            />
          </div>
          <div style="margin-left: 4px; float: left">Notes</div>
        </div>
      </div>
      <div>
        <ul>
          <li><a href="#">Icons</a></li>
          <li><a href="#">Notes List</a></li>
          <li><a href="#">Last Seven Days</a></li>
        </ul>
      </div>
    </JqxNavigationBar>
  </div>
</template>

<script>
import JqxNavigationBar from "jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue";
import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";

export default {
  components: {
    JqxNavigationBar,
    JqxButton
  },
  methods: {
    getName: function (index) {
      switch (index) {
        case 0:
          return "Early History of the Internet";
        case 1:
          return "Merging the networks and creating the Internet";
        case 2:
          return "Popular Internet services";
        default:
          return "Additional Info";
      }
    },
    collapsedItem: function (event) {
      let text = this.getName(event.item);
      // eslint-disable-next-line
      console.log(text);
    },
    expandedItem: function (event) {
      let text = this.getName(event.item);
      // eslint-disable-next-line
      console.log(text);
    },
    // eslint-disable-next-line
    clickHandler: function (event) {
      this.$refs.myNavigationBar.add("<img style='width: 42px; height: 42px;' src='https://www.jqwidgets.com/angular/images/andrew.png'> Header", "Content");
    }
  },
};
</script>

<style>
</style>

<style src="./assets/styles/jqwidgets/jqx.base.css"></style>
<style src="./assets/styles/jqwidgets/jqx.material-green.css"></style>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts