Difference between Vue 3.0 and the Breadcrumb error: Modifying the "items" property

I'm currently in the process of building a website with the vuesax theme and vue cli 3.0.

Custom Default Layout:

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

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

Improved 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've encountered an error, which you can view here.

I've successfully implemented the vue i18n module for translation, except for one scenario: when switching from English to French, the current page's breadcrumb translation remains in English. However, it switches to French when navigating to other pages.

javascriptvue.jsvue-componentvuex

Answer №1

To resolve the warning messages, make sure to use a computed property for i18n translates.

When switching languages, the breadcrumbLinks prop is being mutated on the child component, preventing breadcrumb translations from working. Instead of mutating the prop, utilize a computed property as shown below:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that the circle is perfectly centered inside the box?

Currently delving into the world of game programming, I've been struggling with this exercise. I can't seem to figure out why the circle won't stop in the center of the box within the update function. What am I missing? var canvas = documen ...

javascriptgame-physics

Advancing the utilization of custom Angular input fields

I've developed a unique Angular input element that utilizes a textarea as its primary input field. Is there a way for me to pass along the enter key event to the main form? ...

javascriptangular

"Use casperjs to click on a variable instead of a specific selector

Is there a way to interact with a page element in CasperJS without specifying a selector? For example, instead of using: casperjs.thenClick('#test'); I have the variable: var testV = document.querySelector('#test'); And I would like ...

javascriptclickcasperjs

Identifying the unique parent component of a component within Angular

One of my components, named Com1, is imported into multiple other components. Within Com1, there is a button that triggers a function when clicked. In this function, I am trying to print out the parent component of the specific instance of Com1. How can I ...

javascriptangularcomponents

Contrasting ./ and $ in React project module imports

The creator of this particular project has utilized a different path to import a component: import { client } from '$lib/graphql-client' I'm curious: What is the significance of the $ symbol in this case? How does it differ from something ...

javascriptnode.jsreactjsnext.js

Issue with rendering HTML entities in Material UI when passing as props

Encountered a problem with the radio buttons in Material UI. Currently, Material UI accepts value as a prop for the FormControlLabel component. When passing a string with an HTML entity like below, it gets parsed correctly. <FormControlLabel value="fem ...

javascriptreactjsradio-buttonmaterial-uiradio-group

What is the functionality of named function expressions?

After coming across an intriguing example in the book labeled as a "named function expression," I was curious to delve into its mechanics. While the authors mentioned it's not commonly seen, I found it fascinating. The process of declaring the functi ...

javascriptnode.js

Uploading files in NodeJS using the multer library

I am attempting to upload a file to a specific directory on the disk using the multer library. As I analyze the code, it seems that when a request is made, the file is taken from it and saved separately from the rest of the request. Is there a way to acces ...

javascriptnode.jsexpressfile-uploadmulter

Loading web pages using ajax and handling relative paths

My method involves using ajax to load HTML files when links on my page are clicked. The process is simplified as follows: links.click(function () { var href = $(this).attr("href"); history.pushState(null, null, href); $.get($(this).attr("href" ...

javascriptjqueryajaxhtmlweb

Incomplete Loading of Google Maps

Let me clarify that the solutions I have come across so far have not been successful. I am attempting to display a modal alert with a basic Google Maps integration. Problem: Google Maps does not load completely. Snippet from my .js file: var map; functi ...

javascriptjqueryhtmlgoogle-mapszurb-foundation

Substitute any text string starting with a colon, such as the route path in Express

Below are some sample strings: const a = '/example/:someItemUuid/hello' const b = '/example/:someItemUuid/hello/:otherItemUuid' const params = { someItemUuid: '12345', otherItemUuid: '67890' } I am in search o ...

javascriptnode.jsexpresslodash

Introduce a fresh parameter into the promise all chain

I am using the code below and it is functioning as expected. However, I now need to incorporate the modifyOpt() function. Currently, the code works and returns args[2] but I also need to include another step... I want to pass the return value (port) from ...

javascriptnode.jspromisebluebird

``Can you provide guidance on excluding matching values from a dictionary object in a Angular project?

I've developed a function that takes a dictionary object and matches an array as shown below: const dict = { CheckAStatus: "PASS", CheckAHeading: "", CheckADetail: "", CheckBStatus: "FAIL", CheckBHeading: "Heading1", CheckCStatus: "FAIL", ...

javascriptnode.jsangulartypescriptdictionary

Using Selenium to trigger a click event on an ng-click directive in AngularJS is not functioning properly

I am currently trying to confirm that a specific external function is being called when an ng-click event occurs. The code for the input declaration is shown below. While everything seems to be functioning properly in browsers, I am encountering issues dur ...

javascriptc#angularjsseleniumselenium-webdriver

A method for displaying both the next and previous steps without relying on a switch case statement

I have an array list as follows: const data = [ { title: 'Title1', }, { title: 'Title2', }, { title: 'Title3', }, { title: 'Title4', ...

javascriptreactjsnext.js

.submit fails to function when the bound object has been updated via an ajax call

I managed to implement an AJAX commenting system where, upon clicking the Post Comment button, an ajax call is made instead of submitting the form traditionally. Everything was working smoothly until I tried refreshing the page with the comment submit butt ...

javascriptajaxwordpressjquery

Breaking down the text field into two distinct fields

I have successfully modified the code below to meet a new requirement. The current functionality involves splitting the Price field into Pounds and Pence based on the index of the . symbol. However, I now need to extend this functionality to split a Name ...

javascriptjquery

Using the npm timepicker in Laravel 5.8 with precision and efficiency

Looking for some guidance here as a newcomer to installing packages in Laravel. I'm currently working on implementing the timepicker feature from . In order to do this, I've already executed the command npm i jquery-timepicker. However, I seem t ...

javascriptlaravel-5npmtimepicker

Using a wildcard (*) to select elements with JQuery

I'm just starting to learn about JQuery and could use some help. I want to select multiple elements but I only know part of their Ids: for example: <div id="element32422455">Some content</div> <div id="element68475124">Some content& ...

javascriptjqueryjquery-selectors

Error: The function 'document.getsElementsByClassName()' is not defined when evaluating 'undefined'

Actual Error TypeError: undefined is not a function (evaluating 'ActiveElem[i].hasClass('active'); HTML <div class = 'Carousel-Inner'> <div class="morningSlide active"> <img src="/Users/KO527/Sites/TarasDeli ...

javascriptjqueryhtmltypeerror