- 首页
- 前端开发
- Vue 3.0 VsBreadcrumb 错误 - 道具发生变异:“items"
Vue 3.0 VsBreadcrumb 错误 - 道具发生变异:“items"
[英] Vue 3.0 VsBreadcrumb error - Prop being mutated: "items"
本文介绍了Vue 3.0 VsBreadcrumb 错误 - 道具发生变异:“items"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个使用 vuesax 主题的网站.vue cli 3.0
默认布局页面
<div class="main-wrapper"><!---导航---><导航栏:topbarColor="topbarColor":logo="require('@/assets/images/logo/logo-light-icon.png')";:title="logotitle";/><!---侧边栏--><SideBar parent=".main-wrapper";/><面包屑:pageTitle=pageTitle":breadcrumbLinks=breadcrumbLinks/><!---页面容器--><div class="main-container-fluid"><插槽/>
</模板>
仪表板组件
<DefaultLayout :pageTitle="$t('dashboard.pageTitle')";:breadcrumbLinks=breadcrumbLinks><div><状态/><vs-row vs-justify="center"><vs-col vs-lg=12"><vs-card><div slot="header"><div class="d-flex align-items-center"><div><h5 class="card-title">{{ $t('dashboard.projects.recent') }}</h5>
<div class="ml-auto text-right"><div><span class="text-muted">{{ $t('dashboard.projects.total') }}</span><h2 class="text-success mb-0">90</h2>
<最近的项目/></vs-card></vs-col></vs-row>
</默认布局></模板><脚本>从../layouts/DefaultLayout"导入 DefaultLayout；从../components/dashboard/RecentProjects.vue"导入RecentProjects；从../components/dashboard/States.vue"导入状态；导出默认{名称:仪表板"，成分: {最近的项目，状态，默认布局},数据:() =>({面包屑链接:[{标题: global.vm.$t('breadcrumbs.home'),网址:"},{标题: global.vm.$t('breadcrumbs.dashboard'),活动:真实}],})};
面包屑组件
<vs-row class="vs-breadcrumb-row";vs-type=flex"vs-justify="space-around"><vs-col类型=弹性"vs-justify =中心"vs-align=中心"vs-lg=12"vs-sm=12"vs-xs=12"代码切换器><vs-card class="br-0"><h4 class="card-title mb-0 d-flex"><vs-row vs-justify="space-between";vs-align=中心">{{ 页面标题 }}<div class="d-flex align-items-center"><vs-breadcrumb separator="chevron_right";:items="breadcrumbLinks";></vs-breadcrumb></vs-row></vs-card></vs-col></vs-row></模板><脚本>导出默认{名称:面包屑"，道具: {页面标题: {类型:字符串},面包屑链接:{类型:数组}}};
我收到以下错误
而且我还集成了 vue i18n 模块，翻译工作正常，除了一种情况:当我从 EN 更改为 FR 时，当前页面面包屑翻译没有更改，它仍然保留在 EN 中，但是当它更改为 FR 时我切换到其他页面.
解决方案
i18n translates 应该是一个计算属性，这就是你收到警告的原因.
每当您从另一种语言切换一种语言时，breadcrumbLinks 道具就会在子组件上发生变化，这就是面包屑翻译不起作用的原因，只需使用计算属性即可:
<DefaultLayout :pageTitle="$t('dashboard.pageTitle')";:breadcrumbLinks=breadcrumbLinks><div><状态/><vs-row vs-justify="center"><vs-col vs-lg=12"><vs-card><div slot="header"><div class="d-flex align-items-center"><div><h5 class="card-title">{{ $t('dashboard.projects.recent') }}</h5><div class="ml-auto text-right"><div><span class="text-muted">{{ $t('dashboard.projects.total') }}</span><h2 class="text-success mb-0">90</h2>
<最近的项目/></vs-card></vs-col></vs-row>
</默认布局></模板><脚本>从../layouts/DefaultLayout"导入 DefaultLayout；从../components/dashboard/RecentProjects.vue"导入RecentProjects；从../components/dashboard/States.vue"导入状态；导出默认{名称:仪表板"，成分: {最近的项目，状态，默认布局},计算:{面包屑链接(){返回 [{标题: global.vm.$t('breadcrumbs.home'),网址:"},{标题: global.vm.$t('breadcrumbs.dashboard'),活动:真实}],}}};
I am developing a website using vuesax theme.
vue cli 3.0
Default Layout Page
<template>
<div class="main-wrapper">
<!---Navigation-->
<Navbar
:topbarColor="topbarColor"
:logo="require('@/assets/images/logo/logo-light-icon.png')"
:title="logotitle"
/>
<!---Sidebar-->
<SideBar parent=".main-wrapper" />
<Breadcrumbs :pageTitle="pageTitle" :breadcrumbLinks=breadcrumbLinks />
<!---Page Container-->
<div class="main-container-fluid">
<slot />
</div>
</div>
</template>
Dashboard Component
<template>
<DefaultLayout :pageTitle="$t('dashboard.pageTitle')" :breadcrumbLinks=breadcrumbLinks>
<div>
<States />
<vs-row vs-justify="center">
<vs-col vs-lg="12">
<vs-card>
<div slot="header">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title">{{ $t('dashboard.projects.recent') }}</h5>
</div>
<div class="ml-auto text-right">
<div>
<span class="text-muted">{{ $t('dashboard.projects.total') }}</span>
<h2 class="text-success mb-0">90</h2>
</div>
</div>
</div>
</div>
<RecentProjects />
</vs-card>
</vs-col>
</vs-row>
</div>
</DefaultLayout>
</template>
<script>
import DefaultLayout from "../layouts/DefaultLayout";
import RecentProjects from "../components/dashboard/RecentProjects.vue";
import States from "../components/dashboard/States.vue";
export default {
name: "Dashboard",
components: {
RecentProjects,
States,
DefaultLayout
},
data: () => ({
breadcrumbLinks: [
{
title: global.vm.$t('breadcrumbs.home'),
url: ""
},
{
title: global.vm.$t('breadcrumbs.dashboard'),
active: true
}
],
})
};
</script>
Breadcrumbs Component
<template>
<vs-row class="vs-breadcrumb-row" vs-type="flex" vs-justify="space-around">
<vs-col
type="flex"
vs-justify="center"
vs-align="center"
vs-lg="12"
vs-sm="12"
vs-xs="12"
code-toggler
>
<vs-card class="br-0">
<h4 class="card-title mb-0 d-flex">
<vs-row vs-justify="space-between" vs-align="center">
{{ pageTitle }}
<div class="d-flex align-items-center">
<vs-breadcrumb separator="chevron_right"
:items="breadcrumbLinks"
></vs-breadcrumb>
</div>
</vs-row>
</h4>
</vs-card>
</vs-col>
</vs-row>
</template>
<script>
export default {
name: "Breadcrumbs",
props: {
pageTitle: {
type: String
},
breadcrumbLinks: {
type: Array
}
}
};
</script>
I am getting the following error
and also I have integrated vue i18n module, translation is working fine except for one condition: when I change from EN to FR the current page breadcrumbs translation doesn't change, it still remains in EN, but it's changed to FR when I switch to other pages.
解决方案
i18n translates should be a computed property, this is the reason you are getting warnings.
The breadcrumbLinks prop is mutating on the child component whenever you switch one language from another, and this is the reason that breadcrumb translations aren't working, just use a computed property instead:
<template>
<DefaultLayout :pageTitle="$t('dashboard.pageTitle')" :breadcrumbLinks=breadcrumbLinks>
<div>
<States />
<vs-row vs-justify="center">
<vs-col vs-lg="12">
<vs-card>
<div slot="header">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title">{{ $t('dashboard.projects.recent') }}</h5>
</div>
<div class="ml-auto text-right">
<div>
<span class="text-muted">{{ $t('dashboard.projects.total') }}</span>
<h2 class="text-success mb-0">90</h2>
</div>
</div>
</div>
</div>
<RecentProjects />
</vs-card>
</vs-col>
</vs-row>
</div>
</DefaultLayout>
</template>
<script>
import DefaultLayout from "../layouts/DefaultLayout";
import RecentProjects from "../components/dashboard/RecentProjects.vue";
import States from "../components/dashboard/States.vue";
export default {
name: "Dashboard",
components: {
RecentProjects,
States,
DefaultLayout
},
computed: {
breadcrumbLinks() {
return [
{
title: global.vm.$t('breadcrumbs.home'),
url: ""
},
{
title: global.vm.$t('breadcrumbs.dashboard'),
active: true
}
],
}
}
};
</script>
这篇关于Vue 3.0 VsBreadcrumb 错误 - 道具发生变异:“items"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
