items property become unreactive after itemClick event

[Ricardo]

<template>
  <div class="container">
    <ejs-menu :items="menuItems" :select="select"></ejs-menu>
    <div style="width: 100%"></div>
    <ejs-menu :items="userItems" :select="select"></ejs-menu>
  </div>
  <div class="container">
    <ejs-toolbar :items="store.toolItems" :clicked="clickToolbar"></ejs-toolbar>
  </div>
  <div style="background: #f4f5f8">
    <div style="margin: 5px 0 5px 10px">
      <ejs-breadcrumb
        :items="store.breadcrumbItems"
        :beforeItemRender="bx"
        @itemClick="breadcrumbClick"
      ></ejs-breadcrumb>
    </div>
  </div>
  <div style="margin-left: 5px; height: 100%" class="flex-column">
    <ejs-tab :items="store.tabItems" :adding="add"></ejs-tab>
    <div
      style="height: 100%; border: solid #dee2e6; border-width: 0 1px 1px 1px"
    >
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts">
import {
  BreadcrumbComponent,
  MenuComponent,
  TabComponent,
  ToolbarComponent,
} from "@syncfusion/ej2-vue-navigations";

export default {
  components: {
    "ejs-toolbar": ToolbarComponent,
    "ejs-menu": MenuComponent,
    "ejs-breadcrumb": BreadcrumbComponent,
    "ejs-tab": TabComponent,
  },
};
</script>
<script setup lang="ts">
import {onMounted, onUpdated, ref} from "vue";
import type {
  AddEventArgs,
  BreadcrumbBeforeItemRenderEventArgs,
  BreadcrumbClickEventArgs,
  ClickEventArgs,
  MenuEventArgs, MenuItemModel,
} from "@syncfusion/ej2-vue-navigations";
import { RouterView } from "vue-router";
import { useMainViewStore } from "@/stores/main-view";

const store = useMainViewStore();

store.tabItems = [{ header: { text: "Home" }}]
store.breadcrumbItems = [{ iconCss: "e-icons e-home", url: "/" }]

const menuItems = [
  {
    text: "文件",
  },
  {
    text: "工具",
    items: [
      { text: "临界Excel导出" },
      { text: "开发工具" },
      { text: "邮件工具" },
    ],
  },
  {
    text: "任务",
  },
  {
    text: "管理",
  },
  {
    text: "设置",
  },
  {
    text: "页面地图",
  },
];
const userItems = ref<MenuItemModel[]>([
  {
    id: "avatar_item",
    text: "test",
    items: [
      {
        iconCss: "e-icons e-settings",
        text: "设置",
      },
      {
        iconCss: "e-icons e-chevron-left",
        text: "登出",
      },
    ],
  },
]);

function select(args: MenuEventArgs) {
  store.tabItems= [];
  console.log(store.breadcrumbItems);
}

function bx(args: BreadcrumbBeforeItemRenderEventArgs) {
  //console.log(args.item);
}

function clickToolbar(args: ClickEventArgs) {
  console.log(args.item.tooltipText);
}

function breadcrumbClick(args: BreadcrumbClickEventArgs) {
  args.event.preventDefault()
  if (args.item.url != null) {
    store.openPage(args.item.url);
  }
}

function add(args:AddEventArgs){
  console.log(args.addedItems);
}

onMounted(() => {
  let div = document.createElement("div");
  div.className = "e-avatar e-avatar-small e-avatar-circle";
  div.style.backgroundImage =
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIjUvM7QpaCnvm84rAzq14UZW3XtieeACcbQ&usqp=CAU";
  div.setAttribute(
    "style",
    "background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIjUvM7QpaCnvm84rAzq14UZW3XtieeACcbQ); margin-top: 9px; margin-right: 8px;"
  );
  let el = document.querySelector("#avatar_item");
  el?.prepend(div);
});

</script>
<style scoped>
.container {
  display: flex;
  width: 100%;
  border: dotted #eef2f6;
  background: white;
  border-width: 0 0 1px 0;
}
</style>

[YuvanShankar Arunagiri]

Hi Ricardo,

We have attempted to reproduce the issue in our end, but were unable to do so. We have created a sample to show that the breadcrumb working fine in our end, after itemClick event.

If you are still experiencing the issue, please provide us with a reproducible sample or replicate the issue in our sample. Additionally, please share a video demonstration and more details about the issue. With this information, we will be able to better understand the problem and work on a solution for you.

Regards,

YuvanShankar A

Attachment: Vue2breadcrumb_5475751d.zip

[Ricardo]

Hi,

I have download your code and changed it. Now the issue is reproduced by the new one in this attachment.
You can follow these steps to reproduce the issue:

1. The frist time when you Click the 'btn' then breadcrumb present "one two three"
2. Then Click the breadcrumb item.
3. The second time when you Click the 'btn' again, the breadcrumb  can not show as "one two three".

Thanks a lot.

Kind regards,
Ricardo

Attachment:

Attachment: Vue2breadcrumb_5475751d_a745d396.zip

[YuvanShankar Arunagiri]

Ricardo,

We have checked your provided sample and found an issue in your sample code. The changing the property of component only occur when old property value and new property value are different. From your sample code, we understand that, you try to reset the breadcrumb to initial state. Using the activeItem property, we can achieve your requirement. please refer to the below demo’s link and code snippet.

Demo’s link: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/breadcrumb/default.html

reset(){

      var breadcrumb = (document.getElementsByClassName("e-breadcrumb")[0] as any).ej2_instances[0];

      breadcrumb.activeItem = breadcrumb.items[breadcrumb.items.length - 1].text;

    }

Get back to us if you need any further assistance on this. 

Attachment: App_da46a594.zip