We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

items property become unreactive after itemClick event

<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>



3 Replies 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team January 17, 2023 09:07 AM UTC

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


RI Ricardo replied to YuvanShankar Arunagiri January 17, 2023 10:07 AM UTC

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


YA YuvanShankar Arunagiri Syncfusion Team January 18, 2023 04:23 AM UTC

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

Marked as answer
Loader.
Up arrow icon